《重学CSS》- CSS选择器总结，你值得拥有

小翟说前端
556 阅读8分钟

一、基础选择器

通配符选择器

* 选择所有元素

<header>《重学CSS》- 通配符选择器</header>
<nav>《重学CSS》- 通配符选择器</nav>
<footer>《重学CSS》- 通配符选择器</footer>

* {
    color:orange;
}

微信截图_20211231151605.png

标签选择器

element 选择所有[element]元素

<div>《重学CSS》- 标签选择器</div>
<div>《重学CSS》- 标签选择器</div>
<div>《重学CSS》- 标签选择器</div>

 div {
    color:orange;
}

微信截图_20211231152446.png

类选择器

.class 选择所有具有相同class属性的元素

<div class="name">《重学CSS》- class类选择器</div>
<div class="name">《重学CSS》- class类选择器</div>
<div>《重学CSS》- class类选择器</div>

.name {
    padding:0;
    margin:0;
    color:orange;
}

微信截图_20211231153931.png

ID选择器

#id 选择具有相关id属性的元素
文档中ID应该是唯一的，虽然为多个元素设置同一个ID也可以产生样式效果，但这是不符合规范的。建议优先使用类选择器

<div id="title">《重学CSS》- id类选择器</div>
<div id="name">《重学CSS》- id类选择器</div>
<div>《重学CSS》- id类选择器</div>

 #title,#name {
    padding:0;
    margin:0;
    color:orange;
}

微信截图_20211231154100.png

二、结构选择器

选择器示例描述
后代选择器div p选择div内部的所有p元素
子元素选择器div>p选择div内部的所有p元素,不包含孙子及以下元素
紧邻兄弟元素div+pdiv后面紧邻的一个兄弟元素p
后面兄弟元素div~pdiv后面的所有 p兄弟元素,*标识任意元素

后代选择器

选择div内部的所有p元素

<div class="warp">
    <div class="body">
        <p>《重学CSS》- 结构选择器</p>
    </div>
    <p>《重学CSS》- 结构选择器</p>
    <p>《重学CSS》- 结构选择器</p>
    <div>《重学CSS》- 结构选择器</div>
</div>

 .warp p {
    color:orange;
}

微信截图_20211231181604.png

子元素选择器

选择div内部的所有p元素,不包含孙子及以下元素

<div class="warp">
    <div class="body">
        <p>01《重学CSS》- 结构选择器</p>
    </div>
    <p>02《重学CSS》- 结构选择器</p>
    <p>03《重学CSS》- 结构选择器</p>
    <div>04《重学CSS》- 结构选择器</div>
</div>

.warp > p {
    color:orange;
}

微信截图_20211231181604.png

紧邻兄弟元素

div后面紧邻的一个兄弟元素p

<div class="warp">
    <div class="body">
        <p> 01《重学CSS》- 结构选择器</p>
    </div>
    <p> 02《重学CSS》- 结构选择器</p>
    <p> 03《重学CSS》- 结构选择器</p>
    <div> 04《重学CSS》- 结构选择器</div>
</div>

 .body+p {
    color:orange;
}

后面兄弟元素

div后面的所有p元素,*标识任意元素

<div class="warp">
    <div class="body">
        <p> 01《重学CSS》- 结构选择器</p>
    </div>
    <p> 02《重学CSS》- 结构选择器</p>
    <p> 03《重学CSS》- 结构选择器</p>
    <div> 04《重学CSS》- 结构选择器</div>
</div>

 .body~p {
    color:orange;
}

微信截图_20211231181604.png

 .body~* {
    color:orange;
}

微信截图_20211231182501.png

三、属性选择器

选择器示例描述
[attribute][target]选择带有 target 属性的所有元素
[attribute=value][target=_blank]选择带有 target="_blank" 属性的所有元素
[attribute~=value][target~=flower]选择 target 属性包含单词 flower 的所有元素
[attribute|=value][target|=en]选择其target属性值只为en的元素 或 target属性值以破折号(-)连接并且以en单词开头的元素
[attribute^=value][target^=_blank]选择其 target 属性值以 "_blank"字符串开头的元素
[attribute$=value][target$=_blank]选择其 target 属性值以 "_blank"字符串结尾的元素
[attribute*=value][target*=_blank]选择其 target 属性值(任意位置)包含 "_blank"字符串的元素

如果属性值是特殊字符串，在使用用属性选择器是需要加上value引号 例如数字、http://

<p title="123">01《重学CSS》- 属性选择器</p>
<p title="https://juejin.cn/">02《重学CSS》- 属性选择器</p>

[title='123'] {
    color:orange;
}
[title='https://'] {
    color:orange;
}

[attribute]

选择带有 target 属性的所有元素

<p title="name"> 《重学CSS》- 属性选择器</p>

[title|=name] {
    color:orange;
}

[attribute=value]

选择带有 attribute="value" 属性的所有元素

<p title="name"> 《重学CSS》- 属性选择器</p>

[title='name'] {
    color: orange;
}

[attribute~=value]

选择 attribute 属性包含单词 "value" 的所有元素
敲黑板-重点
attribute包含单词value

[attribute|=value]

(1) [attribute]只为[value]的元素
(2) [attribute]以破折号(-)连接并且以[value]单词开头的元素

<p title="name">01《重学CSS》- 属性选择器</p>
<p title="name age">02《重学CSS》- 属性选择器</p>
<p title="nameage">03《重学CSS》- 属性选择器</p>
<p title="name-age">04《重学CSS》- 属性选择器</p>

[title|=name] {
    color:orange;
}

QQ截图20211231231340.png

[attribute^=value]

选择其 attribute 属性值以 "value"字符串开头的元素

<div title="name">01《重学CSS》- 属性选择器</div>
<div title="name_age">02《重学CSS》- 属性选择器</div>
<div title="nameage">03《重学CSS》- 属性选择器</div>
<div title="age name">04《重学CSS》- 属性选择器</div>

[title^='name'] {
    color:orange;
}

微信截图_20220104115318.png

[attribute$=value]

选择其 attribute 属性值以 "value"字符串结尾的元素

<div title="name">01《重学CSS》- 属性选择器</div>
<div title="age_name">02《重学CSS》- 属性选择器</div>
<div title="agename">03《重学CSS》- 属性选择器</div>
<div title="age name">04《重学CSS》- 属性选择器</div>
<div title="name age">05《重学CSS》- 属性选择器</div>

[title$='name'] {
    color:orange;
}

微信截图_20220104115318.png

[attribute$=value]

选择其 attribute 属性值(任意位置)包含 "value"字符串的元素

<div title="sexnameage">01《重学CSS》- 属性选择器</div>
<div title="age_name">02《重学CSS》- 属性选择器</div>
<div title="agename">03《重学CSS》- 属性选择器</div>

[title*='name'] {
    color:orange;
}

微信截图_20220104115318.png

四、伪类选择器

超链接伪类选择器

:link

选择所有未访问过的链接 (默认状态)

a:link {
    color:orange;
}
:active

选择活动链接 (鼠标按下)

a:active {
    color:orange;
}
:visited

选择所有已访问的链接 (已被访问)

a:visited {
    color:orange;
}
:hover

鼠标移入

a:hover {
    color:orange;
}

锚点伪类

:target

用于控制具有锚点目标元素的样式,锚点激活样式

<a href="#content">锚点测试</a>
<div></div>
<div id="content">我是锚点内容</div>

div {
    height:100px;
    border:1px solid #dcdcdc;
    margin:20px auto;
    width:200px;
    line-height:100px;
}
div:target {
    color:red;
    border-color:orange;
}

微信截图_20220104135640.png

根元素伪类

:root

选择文档的根元素

<div class="container">01 Learning CSS</div>
<p>02 Learning CSS</p>

:root {
    color:red
}

微信截图_20220104142146.png

空元素伪类

:empty

选择没有子元素的元素

<div>Learning CSS</div>
<div></div>

div:empty{
    height:80px;
    display:flex;
    justify-content:center;
    align-items:center;
    border:1px solid #dcdcdc;
    width:200px;
    margin:20px auto;
}
div:empty:before {
    content:'暂无数据';
    color:#999;
    font-size:12px;
}

微信截图_20220104143124.png

结构伪类

:first-child 和 :first-of-type

p:first-child 选择父元素中第一个元素是p的元素

:first-of-type 选择父元素中第一个p元素

<div class="container">
    <div>01 CSS 伪类选择器</div>
    <p>02 CSS 伪类选择器</p>
    <div class="warp">
        <div>03 CSS 伪类选择器</div>
        <p>04 CSS 伪类选择器</p>
    </div>
</div>

/* 选择 .container 下的第一个子元素 */
.container :first-child{
    color:red;
}

/* 选择 .warp 下的第一个是div元素 */
.warp div:first-child{
    color:blue;
}

/* 选择 .warp 下第一个p元素 */
.warp p:first-of-type{
    color:green;
}

微信截图_20220104182034.png

:last-child 和 :last-of-type

p:last-child 选择父元素中最后一个元素是p的元素

:last-of-type 选择父元素中最后一个p元素

<div class="container">
    <div>01 CSS 伪类选择器</div>
    <p>02 CSS 伪类选择器</p>
    <div class="warp">
        <p>03 CSS 伪类选择器</p>
        <div>04 CSS 伪类选择器</div>
    </div>
    <p>05 CSS 伪类选择器</p>
</div>

/* 选择 .container 下的最后一个子元素 */
.container :last-child{
    color:red;
}

/* 选择 .warp 下的最后一个是div元素 */
.warp div:last-child{
    color:blue;
}

/* 选择 .warp 下最后一个p元素 */
.warp p:last-of-type{
    color:green;
}

微信截图_20220104182034.png

:only-child 和 :only-of-type

:only-child 选择父元素中唯一的子元素 父元素中只能有唯一一个子元素

p:only-of-type 选择父元素中唯一的一个p元素，父元素可以有多个子元素，但是只能有一个p元素

<div class="container">
    <div>01 CSS 伪类选择器</div>
    <p>02 CSS 伪类选择器</p>
</div>

<div class="warp">
    <div>03 CSS 伪类选择器</div>
</div>

.container div:only-of-type {
    color:orange;
}

.warp div:only-child{
    color:red;
}

微信截图_20220104182034.png

:nth-child(n) 和 :nth-of-type

:nth-child(n) 选择父元素中第几个子元素

p:nth-of-type(n) 选择父元素中第n个p元素，不管中间有无其他元素

<div>01 CSS伪类选择器</div>
<p>02 CSS伪类选择器</p>
<div>03 CSS伪类选择器</div>
<p>04 CSS伪类选择器</p>
<div>05 CSS伪类选择器</div>

body :nth-child(2) {
    color:red;
}

body p:nth-of-type(2) {
    color:orange;
}

微信截图_20220104182034.png

:nth-last-child(n) 和 :nth-last-of-type

:nth-last-child(n) 选择父元素中倒数第几个子元素

p:nth-last-of-type(n) 选择父元素中倒数第n个p元素，不管中间有无其他元素

<div>01 CSS伪类选择器</div>
<p>02 CSS伪类选择器</p>
<div>03 CSS伪类选择器</div>
<p>04 CSS伪类选择器</p>
<div>05 CSS伪类选择器</div>

body :nth-last-child(2) {
    color: red;
}

p:nth-last-of-type(2) {
    color: orange;
}

微信截图_20220105133422.png

排除伪类

:not

:not(p) 排除p元素以外的元素(与p同级的元素)

<div>01 CSS伪类选择器</div>
<div>02 CSS伪类选择器</div>
<div>03 CSS伪类选择器</div>
<div>04 CSS伪类选择器<div>
<div>05 CSS伪类选择器</div>

/* 选择除第三个div之外的所有div */
div:not(:nth-child(3)) {
    color:orange;
}

微信截图_20220105133940.png

表单伪类

:focus

选择获得焦点的表单元素

:enabled 和 :disabled

:enabled 选择每个启用的表单元素

:disabled 选择每个禁用的表单元素

:required 和 :optional

:required 选择带有 "required" 属性的表单元素

:optional 选择不带 "required" 属性的表单元素

:valid 和 :invalid（不常用）

:valid 选择带有有效值的所有 表单 元素

:invalid 选择具有无效值的所有 表单 元素

字符伪类

::first-letter 和 ::first-line

::first-letter 英文下，选择首字母；中文下，选择第一个汉字

::first-line 选择第一行，如果子元素全都是块级元素，则选择第一个块级元素的第一行

::before 和 ::after

::before 元素的内容之前插入内容，需配合content:'xx'使用

::after 元素的内容之后插入内容，需配合content:'xx'使用

获取元素属性的内用

attr([attribute]) 获取属性attribute的值

<div class="button" num='10'>我是按钮</div>

.button {
    width:150px;
    height:40px;
    border-radius:40px;
    line-height:40px;
    background:orange;
    color:#fff;
    margin:0 auto;
    position:relative;
}
.button::after {
    content:attr(num);
    color:#fff;
    position:absolute;
    width:20px;
    height:20px;
    background:red;
    text-align:center;
    line-height:20px;
    font-size:12px;
    border-radius:50%;
    top:-10px;
    right:0px;
}

微信截图_20220105142850.png

avatar
文章
阅读
粉丝