选择器

作用：查找标签,设置样式。

基础选择器

元素选择器

为页面中某种元素统一设置样式。

元素选择器选择的是一类元素,而不是单独某一个,因此元素选择器无法实现差异化设置。
元素选择器无论嵌套关系有多深,都能找到对应的元素。

1tag {
2  /* 元素选择器 */
3}

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <title>元素选择器</title>
6    <style>
7      li {
8        color: orange;
9      }
10    </style>
11  </head>
12  <body>
13    <ul>
14      <li>one</li>
15      <li>two</li>
16      <li>three</li>
17      <li>four</li>
18      <li>five</li>
19    </ul>
20  </body>
21</html>

:::

类选择器

根据元素的 class 值,来选中页面中所有带这个类名的元素。

一个元素可以有多个类名,类名之间以空格隔开。
class值,是我们自定义的,按照标准：不要使用纯数字、不要使用中文、尽量使用英文与数字的组合,若有多个单词组成,使用 - 做连接,例如：left-menu,且命名要有意义,做到“见名知意”。

1.className {
2  属性名: 属性值;
3}
4
5[class~="className"] {
6  属性名: 属性值;
7}

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <title>类选择器</title>
6    <style>
7      .box1 {
8        width: 100px;
9        height: 100px;
10        background-color: orange;
11      }
12
13      [class~="box2"] {
14        width: 100px;
15        height: 100px;
16        background-color: orange;
17      }
18    </style>
19  </head>
20  <body>
21    <div class="box1"></div>
22    <div class="box2"></div>
23  </body>
24</html>

:::

id选择器

根据元素的 id 属性值,来精准的找到页面中带有这个id属性值的元素,设置样式。

id属性值在一个页面中是唯一的,不可重复的。
id属性值：尽量由字母、数字、下划线(_)、短杠(-)组成,最好以字母开头、不要包含空格、区分大小写。
一个标签上只能有一个id属性值,一个id选择器只能选中一个标签。
id选择器通常配合js使用。

1#idName {
2  属性名: 属性值;
3}
4
5[id="idName"] {
6  属性名: 属性值;
7}

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <title>ID选择器</title>
6    <style>
7      #box1 {
8        width: 100px;
9        height: 100px;
10        background-color: orange;
11      }
12
13      [id="box2"] {
14        width: 100px;
15        height: 100px;
16        background-color: orange;
17      }
18    </style>
19  </head>
20  <body>
21    <div id="box1"></div>
22    <div id="box2"></div>
23  </body>
24</html>

:::

通配符选择器

可以选中页面中所有的 HTML 元素。

通配符选择器不需要调用,自动就给所有的元素使用样式。
一般用于清除样式。

1* {
2  /* 通配符选择器 */
3}

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <title>通配符选择器</title>
6    <style>
7      * {
8        color: orange;
9      }
10    </style>
11  </head>
12  <body>
13    <div>div元素</div>
14    <p>p元素</p>
15    <span>span元素</span>
16  </body>
17</html>

:::

复合选择器

由两个或多个基础选择器,通过不同的方式组合而成。

作用：更准确、更高效的选择目标元素。

后代选择器

根据html标签的嵌套关系,选择父元素后代中满足条件的元素。

选择器之间用空格隔开
后代选择器,最终选择的是后代,不选中祖先。
儿子、孙子、重孙子,都算是后代
结构一定要符合HTML的嵌套要求,例如：不能 p 中写 h1～h6

1选择器1 选择器2{
2	属性: 值;
3}

1parent posterity{
2	属性: 属性值;
3}

:::

元素的关系

元素之间的关系主要有：父元素、子元素、祖先元素、后代元素、兄弟元素。

父元素：直接包裹某个元素的元素。

1<!-- div就是span的父元素 -->
2<div>
3  <span>span元素</span>
4</div>

子元素：被父元素直接包含的元素。

1<!-- span就是div的子元素 -->
2<div>
3  <span>span元素</span>
4</div>

祖先元素：父元素的父元素,...一直往外找都是祖先。

1<!-- div就是li的祖先元素 -->
2<div>
3  <ul>
4    <li>li元素</li>
5  </ul>
6</div>

后代元素：子元素的子元素,...一直往里找都是后代。

1<!-- li就是div的后代元素 -->
2<div>
3  <ul>
4    <li>li元素</li>
5  </ul>
6</div>

兄弟元素：具有相同父元素的元素,互为兄弟元素。

1<!-- h1和ul就是兄弟元素 -->
2<div>
3  <h1>h1元素</h1>
4  <ul>
5    <li>li元素</li>
6  </ul>
7</div>

子代选择器

根据html标签的嵌套关系,选择父元素子代中满足条件的元素。

子选择器又称「子代选择器」、「子元素选择器」。

选择器之间用 > 隔开
子选择器,最终选择的是子代,不是父级
子、孙子、重孙子、重重孙子....,统称后代,子就是指儿子。

1father>child {
2	属性: 属性值;
3}

:::

兄弟选择器

相邻兄弟选择器

选中指定元素后,符合条件的相邻兄弟元素。

所谓相邻,就是紧挨着它的下一个,简记：睡在我下铺的兄弟。

1选择器1+选择器2{
2	属性: 值;
3}

1/*选中紧紧相邻的兄弟元素（睡在我下铺的兄弟）*/
2bro1+bro2{
3	属性: 值;
4}

:::

通用兄弟选择器

选中指定元素后,符合条件的所有兄弟元素。

两种兄弟选择器,选择的都是下面的兄弟

1选择器1~选择器2{
2	属性: 值;
3}

1bro1~bro2{
2	属性: 属性值;
3}

:::

并集选择器

同时选择多个选择器对应的元素,设置相同的样式,中间用 , 间隔,又称「分组选择器」。所谓并集就是或者的含义。

并集选择器,我们一般竖着写
任何形式的选择器,都可以作为并集选择器的一部分。
并集选择器,常用于集体声明,可以缩小样式表体积。

1选择器1,
2选择器2,
3...选择器n {
4	属性: 值;  
5}

1ele1,ele2 {
2	属性: 属性值;
3}

:::

交集选择器

选中页面中同时符合多个条件的元素,交集有「并且」的含义。

交集选择器中如果有元素选择器,元素选择器必须写在最前面。
id选择器理论上可以作为交集的条件,但是实际应用中几乎不用,因为无意义。
交集选择器中不可能出现两个元素选择器,因为一个元素不可能即是p元素又是span元素。
用的最多的交集选择器是：元素选择器配合类选择器,例如：p.one。

1选择器1选择器2 {
2	属性: 值;
3}

1/* 选中类名为one的p元素*/
2p.one {
3  color: orange;
4}
5/* 选中类名包含one和two的元素*/
6.one.two {
7  color: orange;
8}

:::

伪类选择器

动态伪类选择器

作用

选中特殊状态的元素

伪类：像类（class）,但不是类,是元素的一种特殊状态。

动态伪类选择器	适用范围	描述
:link	a元素	超链接未被访问的状态
:visited	a元素	超链接访问过的状态
:hover	所有元素	鼠标悬停在元素上的状态
:active	所有元素	鼠标在元素上按下还未弹起的状态
:focus	表单元素	获取焦点的元素

语法

1/* 选中的是没有访问过的a元素 */
2a:link {
3  color: red;
4}
5
6/* 选中的是访问过的a元素 */
7a:visited {
8  color: gray;
9}
10
11/* 鼠标悬停在元素上的状态 */
12span:hover {
13  color: green;
14}
15
16/* 鼠标在元素上按下还未弹起的状态 */
17span:active {
18  color: orange;
19}
20
21/* 获得焦点时的状态 */
22input:focus {
23  background-color: blue;
24}

注意

:link 和 :visited 是a元素独有的两种状态
如果同时使用四个伪类选择器,必须按照以上顺序依次书写 lvha
表单控件获取焦点时默认会显示外部轮廓线

结构伪类选择器

作用

结构伪类选择器主要根据元素在HTML中的结构关系查找元素

优势：减少对HTML中类的依赖,有利于保持代码整洁

使用场景：常用于查找父级选择器里面的子元素

选择符	简介
`:first-child`	所有兄弟元素中的第一个。
`:last-child`	所有兄弟元素中的最后一个。
`:only-child`	选择没有兄弟的元素（独生子女）
`:nth-child(n)`	所有兄弟元素中的第n个。
`:nth-last-child(n)`	所有兄弟元素中的倒数第n个。
`:first-of-type`	所有同类型兄弟元素中的第一个。
`:last-of-type`	所有同类型兄弟元素中的最后一个。
`:only-of-type`	选择没有同类型兄弟的元素
`:nth-of-type(n)`	所有同类型兄弟元素中的第n个。
`:nth-last-of-type(n)`	所有同类型兄弟元素中的倒数第n个。
`:root`	选中的是根元素（html标签）
`:empty`	内容为空的元素（空格也算内容）

语法

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <title>结构伪类选择器</title>
6    <style>
7      /* 选中div的第一个儿子p元素 */
8      div > p:first-child {
9        color: red;
10      }
11    </style>
12  </head>
13  <body>
14    <div>
15      <p>first</p>
16      <p>secind</p>
17      <p>third</p>
18      <p>fourth</p>
19      <p>fifth</p>
20    </div>
21  </body>
22</html>

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <title>结构伪类选择器</title>
6    <style>
7      /* 选中div的最后一个儿子p元素 */
8      div > p:last-child {
9        color: red;
10      }
11    </style>
12  </head>
13  <body>
14    <div>
15      <p>first</p>
16      <p>secind</p>
17      <p>third</p>
18      <p>fourth</p>
19      <p>fifth</p>
20    </div>
21  </body>
22</html>

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <title>结构伪类选择器</title>
6    <style>
7      /* 选中div的唯一一个儿子p元素 */
8      div > p:only-child {
9        color: red;
10      }
11    </style>
12  </head>
13  <body>
14    <div>
15      <p>p元素</p>
16    </div>
17  </body>
18</html>

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <title>结构伪类选择器</title>
6    <style>
7      /* 选中div的第2个儿子p元素 */
8      div > p:nth-child(2) {
9        color: red;
10      }
11    </style>
12  </head>
13  <body>
14    <div>
15      <p>first</p>
16      <p>secind</p>
17      <p>third</p>
18      <p>fourth</p>
19      <p>fifth</p>
20    </div>
21  </body>
22</html>

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <title>结构伪类选择器</title>
6    <style>
7      /* 选中div的倒数第2个儿子p元素 */
8      div > p:nth-last-child(2) {
9        color: red;
10      }
11    </style>
12  </head>
13  <body>
14    <div>
15      <p>first</p>
16      <p>secind</p>
17      <p>third</p>
18      <p>fourth</p>
19      <p>fifth</p>
20    </div>
21  </body>
22</html>

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <title>结构伪类选择器</title>
6    <style>
7      /* 选中div的所有p元素的第1个 */
8      div > p:first-of-type {
9        color: red;
10      }
11    </style>
12  </head>
13  <body>
14    <div>
15      <span>first</span>
16      <p>secind</p>
17      <p>third</p>
18      <p>fourth</p>
19      <p>fifth</p>
20    </div>
21  </body>
22</html>

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <title>结构伪类选择器</title>
6    <style>
7      /* 选中div的所有p元素的倒数第1个 */
8      div > p:last-of-type {
9        color: red;
10      }
11    </style>
12  </head>
13  <body>
14    <div>
15      <span>first</span>
16      <p>secind</p>
17      <p>third</p>
18      <p>fourth</p>
19      <p>fifth</p>
20    </div>
21  </body>
22</html>

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <title>结构伪类选择器</title>
6    <style>
7      /* 选中div的唯一一个span元素 */
8      div > span:only-of-type {
9        color: red;
10      }
11    </style>
12  </head>
13  <body>
14    <div>
15      <span>first</span>
16      <p>secind</p>
17      <p>third</p>
18      <p>fourth</p>
19      <p>fifth</p>
20    </div>
21  </body>
22</html>

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <title>结构伪类选择器</title>
6    <style>
7      /* 选中div的所有p元素的第二个 */
8      div > p:nth-of-type(2) {
9        color: red;
10      }
11    </style>
12  </head>
13  <body>
14    <div>
15      <span>first</span>
16      <p>secind</p>
17      <p>third</p>
18      <p>fourth</p>
19      <p>fifth</p>
20    </div>
21  </body>
22</html>

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <title>结构伪类选择器</title>
6    <style>
7      /* 选中div的所有p元素的倒数第二个 */
8      div > p:nth-last-of-type(2) {
9        color: red;
10      }
11    </style>
12  </head>
13  <body>
14    <div>
15      <span>first</span>
16      <p>secind</p>
17      <p>third</p>
18      <p>fourth</p>
19      <p>fifth</p>
20    </div>
21  </body>
22</html>

注意

关于 n 的值：

形式：an+b
0 或 不写 ：什么都选不中。
n ：选中所有子元素。
1~正无穷的整数 ：选中对应序号的子元素。
2n 或 even ：选中序号为偶数的子元素。
2n+1 或 odd ：选中序号为奇数的子元素。
-n+3 ：选中的是前3个。

否定伪类选择器

作用

:not(选择器) ：排除满足括号中条件的元素。

语法

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <title>否定伪类选择器</title>
6    <style>
7      /* 选中的是div的儿子p元素,但是排除类名为fail的元素 */
8      div > p:not(.fail) {
9        color: red;
10      }
11    </style>
12  </head>
13  <body>
14    <div>
15      <p>first</p>
16      <p>second</p>
17      <p>third</p>
18      <p class="fail">fourth</p>
19      <p class="fail">fifth</p>
20    </div>
21  </body>
22</html>

UI伪类选择器

作用

:checked ：被选中的复选框或单选按钮。

:disabled ：可用的表单元素（没有 disabled 属性）。

:enabled ：不可用的表单元素（有 disabled 属性）。

语法

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <title>UI伪类选择器</title>
6    <style>
7      /* 选中的是勾选的复选框or单选按钮 */
8      input:checked {
9        width: 50px;
10        height: 50px;
11      }
12    </style>
13  </head>
14  <body>
15    <input type="checkbox" />
16    <input type="radio" />
17  </body>
18</html>

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <title>UI伪类选择器</title>
6    <style>
7      /* 选中的是被禁用的input元素 */
8      input:disabled {
9        border: 1px solid red;
10      }
11    </style>
12  </head>
13  <body>
14    <input type="text" />
15    <input type="text" disabled />
16  </body>
17</html>

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <title>UI伪类选择器</title>
6    <style>
7      /* 选中的是可用的input元素 */
8      input:enabled {
9        border: 1px solid red;
10      }
11    </style>
12  </head>
13  <body>
14    <input type="text" />
15    <input type="text" disabled />
16  </body>
17</html>

目标伪类选择器

作用

:target ：选中锚点指向的元素。

语法

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <title>目标伪类选择器</title>
6    <style>
7      div {
8        height: 300px;
9        border: 1px solid gray;
10        margin-bottom: 10px;
11        text-align: center;
12        line-height: 300px;
13      }
14      div:target {
15        background-color: pink;
16      }
17    </style>
18  </head>
19  <body>
20    <a href="#first">锚定first</a>
21    <a href="#second">锚定second</a>
22    <a href="#third">锚定third</a>
23    <a href="#fourth">锚定fourth</a>
24    <a href="#fifth">锚定fifth</a>
25    <a href="#sixth">锚定sixth</a>
26    <div id="first">first</div>
27    <div id="second">second</div>
28    <div id="third">third</div>
29    <div id="fourth">fourth</div>
30    <div id="fifth">fifth</div>
31    <div id="sixth">sixth</div>
32  </body>
33</html>

语言伪类选择器

作用

:lang() ：根据指定的语言选择元素（本质是看 lang 属性的值）。

语法

1<!DOCTYPE html>
2<html lang="en"> // [!code error]
3  <head>
4    <meta charset="UTF-8" />
5    <title>语言伪类选择器</title>
6    <style>
7      div:lang(en) {
8        color: red;
9      }
10      div:lang(zh-CN) {
11        color: green;
12      }
13    </style>
14  </head>
15  <body>
16    <div>div元素</div> // [!code error]
17    <div lang="zh-CN">code better</div>
18  </body>
19</html>

属性选择器

作用：选中属性值符合一定要求的元素。

语法：

选择符	简介
[属性名]	选中具有某个属性的元素
[属性名="值"]	选中包含某个属性,且属性值等于指定值的元素
[属性名^="值"]	选中包含某个属性,且属性值以指定的值开头的元素
[属性名$="值"]	选中包含某个属性,且属性值以指定的值结尾的元素
[属性名*="值"]	选中包含某个属性,且属性值包含指定值的元素

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <title>属性选择器</title>
6    <style>
7      /* 选中具有active属性的元素 */
8      [active] {
9        color: red;
10      }
11      /* 选中具有active属性且属性值为first的元素 */
12      [active="first"] {
13        font-size: 30px;
14      }
15      /* 选中具有active属性且属性值为以t开头的元素 */
16      [active^="t"] {
17        font-weight: 700;
18      }
19      /* 选中具有active属性且属性值为以h结尾的元素 */
20      [active$="h"] {
21        font-style: italic;
22      }
23      /* 选中具有active属性且属性值中包含o的元素 */
24      [active*="o"] {
25        background-color: blue;
26      }
27    </style>
28  </head>
29  <body>
30    <div active="first">第一个元素</div>
31    <div active="second">第二个元素</div>
32    <div active="third">第三个元素</div>
33    <div active="fourth">第四个元素</div>
34  </body>
35</html>

伪元素选择器

作用

伪元素选择器可以帮助我们利用CSS创建新标签元素,而不需要HTML标签,从而简化HTML结构。

什么是伪元素？很像元素,但不是元素（element）,是元素中的一些特殊位置。

::first-letter ：选中元素中的第一个文字。

::first-line ：选中元素中的第一行文字。

::selection ：选中被鼠标选中的内容。

::placeholder ：选中输入框的提示文字。

::before ：在元素最开始的位置,创建一个子元素（必须用 content 属性指定内容）。

::after ：在元素最后的位置,创建一个子元素（必须用 content 属性指定内容）。

语法

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <title>伪元素选择器</title>
6    <style>
7      /* 选中的是div中的第一个文字 */
8      div::first-letter {
9        color: red;
10      }
11    </style>
12  </head>
13  <body>
14    <div>Code Better.</div>
15  </body>
16</html>

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <title>伪元素选择器</title>
6    <style>
7      /* 选中的是div中的第一行文字 */
8      div::first-line {
9        background-color: red;
10      }
11    </style>
12  </head>
13  <body>
14    <div>
15      Code Better.Code Better.Code Better.Code Better.Code Better.Code
16      Better.Code Better.Code Better.Code Better.Code Better.Code Better.
17    </div>
18  </body>
19</html>

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <title>伪元素选择器</title>
6    <style>
7      /* 选中的是div中被鼠标选择的文字 */
8      div::selection {
9        background-color: red;
10      }
11    </style>
12  </head>
13  <body>
14    <div>
15      Code Better.Code Better.Code Better.Code Better.Code Better.Code
16      Better.Code Better.Code Better.Code Better.Code Better.Code Better.
17    </div>
18  </body>
19</html>

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <title>伪元素选择器</title>
6    <style>
7      /* 选中的是input元素中的提示文字 */
8      input::placeholder {
9        color: red;
10      }
11    </style>
12  </head>
13  <body>
14    <div>
15      <input type="text" placeholder="请输入您的用户名" />
16    </div>
17  </body>
18</html>

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <title>伪元素选择器</title>
6    <style>
7      /* 选中的是p元素最开始的位置,随后创建一个子元素 */
8      p::before {
9        content: "¥";
10      }
11      /* 选中的是p元素最后的位置,随后创建一个子元素 */
12      p::after {
13        content: ".00";
14      }
15    </style>
16  </head>
17  <body>
18    <p>100</p>
19  </body>
20</html>

注意

伪元素必须设置content属性才能生效,有文字就写在引号中,没有文字就写空引号。
伪元素相当于行内元素span,能对span设置的样式,对伪元素都好使。
伪元素在文档树中是不显示的。
伪元素选择器和标签选择器一样,权重为 1。

选择器优先级

基本选择器优先级

!important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > * > 继承的样式

权重

计算方式

每个选择器,都可以计算出一组权重,格式为：(a, b, c)
- a ：ID选择器的个数。
- b ：类、伪类、属性选择器的个数。
- c ：元素、伪元素选择器的个数。
例如：

选择器权重

#code-better (1, 0, 0)

.code-better (0, 1, 0)

a (0, 0, 1)

选择器	权重
#code-better	(1, 0, 0)
.code-better	(0, 1, 0)
a	(0, 0, 1)

比较规则

按照从左到右的顺序,依次比较大小,当前位胜出后,后面的不再对比,例如：

(1, 0, 0) > (0, 1, 0)

特殊规则
- 行内样式权重大于所有选择器
- !important 的权重,大于行内样式,大于所有选择器,权重最高！

注意

计算权重时需要注意：并集选择器的每一个部分是分开算的。

选择器#

基础选择器#

元素选择器#

类选择器#

id选择器#

通配符选择器#

复合选择器#

后代选择器#

子代选择器#

兄弟选择器#

相邻兄弟选择器#

通用兄弟选择器#

并集选择器#

交集选择器#

伪类选择器#

动态伪类选择器#

结构伪类选择器#

否定伪类选择器#

UI伪类选择器#

目标伪类选择器#

语言伪类选择器#

属性选择器#

伪元素选择器#

选择器优先级#

选择器