CSS 选择器是 CSS 规则的第一部分。它是元素和其他部分组合起来告诉浏览器哪个 HTML 元素应当是被选为应用规则中的 CSS 属性值的方式。选择器所选择的元素，叫做“选择器的对象”。

一、基本选择器

/* 通配选择器 */
* {}

/* 
 元素选择器：标签名 {}
 */
h1 {}
p {}

/*
 类选择器：.类名 {}
 */
.box {}
.center {}

/*
 ID选择器：#id值 {}
 */
#unique {}
#main {}

一个元素的 class 属性，能写多个值，要用空格隔开，例如:

<div class="box center">你好啊</div>

二、分组选择器

/* 分组选择器 */
h1, p, .box, #main {}

三、交集选择器

/* 类名为 marked 的 p 元素 */
p.marked {} 
/* 类名包含 rich 和 beauty 的元素 */
.rich.beauty {} 

交集选择器中不可能出现两个元素选择器 ，因为一个元素，不可能即是 p 元素又是 span 元素。

四、关系选择器

1. 后代选择器

/* 选中 ul 中的所有 li */
ul li {}

/* 选中 ul 中所有 li 中的 a */ 
ul li a {}

/* 选中类名为 subject 元素中的所有 li */
.subject li {}

/* 选中类名为 subject 元素中的
所有类名为 front-end 的 li */
.subject li.front-end {}

2. 子代选择器

/* div 中的子代 a 元素 */ 
div>a {}

/* 类名为 persons 的元素中的子代 a 元素 */ 
.persons>a {}

3. 相邻兄弟选择器

/* 选中 div 后相邻的兄弟 p 元素 */ 
div+p {}

4. 通用兄弟选择器

/* 选中 div 后的所有的兄弟 p 元素 */ 
h1~p {

五、属性选择器

/* 选中具有 title 属性的元素 */
[title] {}
/* 选中 title 属性值为 atguigu 的元素 */
[title="atguigu"] {}
/* 选中 title 属性值以 a 开头的 div 元素 */
div[title^="a"] {}
/* 选中 title 属性值以 u 结尾的 div 元素 */
div[title$="u"] {}
/* 选中 title 属性值包含 g 的 div 元素 */
div[title*="g"] {}

六、伪类选择器

伪类是选择器的一种，它用于选择处于特定状态的元素。伪类就是开头为冒号的关键字：

/* 未访问的链接 */
a:link {} 
/* 已访问的链接 */
a:visited {} 
/* 鼠标悬停在元素上的状态 */
a:hover {} 
/* 元素激活的状态, 按下鼠标不松开的状态 */
a:active {}
/* 选择具有焦点的元素 */
input:focus {}

/* 被选中的复选框或单选按钮 */
input:checked {}
/* 可用的表单元素（没有 disabled 属性）*/
input[type="text"]:enable {}
/* 不可用的表单元素（有 disabled 属性）*/
input[type="text"]:disabled {}
/* 选择有"required"属性的元素 */
input:required {}

/* 内容为空的 div 元素 */
div:empty {}
/* 根元素 */
:root {}

/* 选中锚点指向的元素 */
:target {}
/* 根据语言选择元素，即看 lang 属性的值）*/
:lang(en) {}
:lang(zh) {}

根据在其父元素下的位置来选择元素：

/* 选中元素为其父元素的第一个子元素 */
li:first-child {}
/* 选中元素为其父元素的最后一个子元素 */
li:last-child {}
/* 选中元素为其父元素的第 n 个子元素 */
li:nth-child(n) {}
/* 选中元素为其父元素的倒数第 n 个子元素 */
li:nth-last-child(n) {}
/* 选中元素为其父元素的唯一子元素 */
li:only-child {}

/* 选中元素为其父元素下同类型元素中的第一个元素 */
.test:first-of-type {}
/* 选中元素为其父元素下同类型元素中的最后一个元素 */
.test:last-of-type {}
/* 选中元素为其父元素下同类型元素中的第 n 个元素 */
.test:nth-of-type(n) {}
/* 选中元素为其父元素下同类型元素中的倒数第 n 个元素 */
.test:nth-last-of-type(n) {}
/* 选中元素为其父元素下同类型元素中的唯一元素 */
.test:only-of-type {}

关于 n 的值：

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

否定伪类：

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

/* body 中除了 p 元素之外的所有元素 */
body :not(p) {}
/* div 元素内不具有 highlight 类的所有元素 */
div :not(.highlight) {}
/* 不是 div 也不是 span 的所有元素 */
:not(div, span) {}
/* 所有不是悬停状态的链接 */
a:not(:hover) {}
/* 所有不是 type="text" 的 input 元素 */
input:not([type="text"]) {}

七、伪元素选择器

选中元素中的一些特殊位置。

/* 选中元素中的第一个文字 */
p::first-letter {}
/* 选中元素中的第一行文字 */
p::first-line {}
/* 选中被鼠标选中的内容 */
p::selection {}
/* 选中输入框的提示文字 */
input::placeholder {}

/* 在元素最开始的位置，创建一个子元素，
使用 content 属性指定内容 */
div::before {}
/* 在元素最后的位置，创建一个子元素，
使用 content 属性指定内容*/
div::after {}

八、选择器的优先级

通过不同的选择器，选中相同的元素 ，并且为相同的样式名设置不同的值时，就发生了样式的冲突。到底应用哪个样式，此时就需要看优先级了。

简单来说：行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器。

实际上是根据计算选择器权重来判断优先级的，计算方式为：每个选择器都可计算出一组权重，格式为： (a, b, c)。

• a : ID 选择器的个数。
• b : 类、伪类、属性 选择器的个数。
• c : 元素、伪元素 选择器的个数。

如下选择器的权重：

ul>li                    (0,0,2)
div ul>li p a span       (0,0,6)
#atguigu .slogan         (1,1,0)
#atguigu .slogan a       (1,1,1)
#atguigu .slogan a:hover (1,2,1)

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

(1,0,0) > (0,2,2)
(1,1,0) > (1,0,3)
(1,1,3) > (1,1,2)

• 行内样式权重大于所有选择器。
• !important 的权重，大于行内样式，大于所有选择器，权重最高。

CSS 中的 !important 规则用于增加样式的权重：

background-color: red !important;

使用 !important 是一个坏习惯，应该尽量避免，因为这破坏了样式表中的固有的级联规则，使得调试找 bug 变得更加困难了。

九、CSS的三大特性

• 层叠性：如果发生了样式冲突，那就会根据一定的规则（选择器优先级），进行样式的层叠（覆盖）。
• 继承性：元素会自动拥有其父元素、或其祖先元素上所设置的某些样式。
• 优先级：简单来说，!important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > * > 继承的样式。具体通过计算权重来判断优先级。