CSS 选择器是 CSS 规则集的一部分，它实际上选择要设置样式的内容。

你可以配合着 常用的一些 CSS 技巧（二） | 伪类伪元素 示例来测试。

CSS 选择符

通用选择器：* 将匹配文档的所有元素。。不推荐使用通配选择器，因为它是性能最低的一个CSS选择器.

/* 常用的是清除所有元素的 margin 和 padding */
* {
  margin: 0;
  padding: 0;
}

/* 也可以与子选择器一起使用。 */
.container * {
  border: 1px solid black;
}

元素选择器：选择具有给定节点名称的所有元素。

/* input 将匹配任何 <input> 元素 */
input { }

ID选择器：根据其 id 属性值选择一个元素。文档中应只有一个具有给定 ID 的元素。

/* 将匹配ID为 toc 的元素 */
#app { }

类选择器：选择具有给定 class 属性的所有匹配的元素。

/* 将匹配具有 .active 类的任何元素 */
.active { }

后代组合器：（空格）组合器选择前一个元素的后代中断。

/* 将匹配 div 元素内部的所有 span 元素 */
div span { }

子组合器：> 组合器选择前一个元素的直接子代的节点。

/* 匹配直接嵌套在 ul 元素内的所有 li 元素 */
ul > li { }

选择器列表：, 是将不同的选择器组合在一起的方法，它选择所有能被列表中的任意一个选择器选中的节点。

/* 会同时匹配 <span> 元素和 <div> 元素 */
div, span { }

通用同级组合器：~ 组合器选择兄弟元素，即后一个节点在前一个节点后面的任意位置，并且共享同一个父节点。

/* 匹配同一父元素下，p 元素后的所有 span 元素 */
p ~ span { }

相邻的同级组合器：+ 组合器选择相邻元素，即后一个元素紧跟在前一个之后，并且共享同一个父节点。

/* 会匹配所有相邻在 h2 元素后的 p 元素 */
h2 + p { }

列组合器：|| 组合器选择属于某个表格行的节点。

/* 会匹配所有 <col> 作用域内的 <td> 元素 */
col || td { }

属性选择器：按照给定的属性，选择所有匹配的元素。

/* 选择所有具有 autoplay 属性的元素（不论这个属性的值是什么） */
[autoplay] { }

伪类：: 伪选择器支持遵循正确的包含在文档树中的状态信息来选择元素。

/* 匹配所有曾被访问过的 <a> 元素 */
a:visited { }

伪元素：:: 伪选择器用于表示无法使用 HTML 语义表达的实体。

/* 匹配所有 <p> 元素的第一行 */
p::first-line { }

组合选择器

组合选择器是将两个选择器连接在一起的选择器中的字符。组合选择器有四种类型。

后代选择器（空格）：选择前一个元素的后代中断。

/* 将匹配 li 元素内部的所有 a 元素 */
li a {
  text-decoration: none;
}

子代选择器（>）：选择前一个元素的直接子代的节点。

/* 匹配直接嵌套在 ul 元素内的所有 li 元素 */
ul > li {
  background: pink;
}

通用兄弟选择器（~）：选择兄弟元素，即后一个节点在前一个节点后面的任意位置，并且共享同一个父节点。

/* 匹配同一父元素下，p 元素后的所有 span 元素 */
p ~ span {
  color: pink;
}

相邻兄弟选择器（+）：选择相邻元素，即后一个元素紧跟在前一个之后，并且共享同一个父节点。

/* 匹配所有相邻在元素后的 div 元素 */
div + p {
  color: pluml
}

属性选择器

[attr] 匹配带有一个名为 attr 的属性的元素——方括号里的值。

a[title] {
  color: pink;
}

[attr=value] 匹配带有一个名为 attr 的属性的元素，其值正为 value——引号中的字符串。

a[href='https://www.jianshu.com/u/3f644e66afa3'] {
  color: plum;
}

[attr~=value] 匹配带有一个名为 attr 的属性的元素 ，其值正为 value，或者匹配带有一个 attr 属性的元素，其值有一个或者更多，至少有一个和 value 匹配。注意，在一列中的好几个值，是用空格隔开的。

img[title~='image'] {
  border: 1px solid pink;
}

[attr|=value] 匹配带有一个名为 attr 的属性的元素，其值可正为 value，或者开始为 value，后面紧随着一个连字符。

div[lang|='zh']

[attr^=value] 匹配带有一个名为 attr 的属性的元素，其值开头为 value 子字符串。

a[href^='https'] {
  color: pink;
}

[attr$=value] 匹配带有一个名为 attr 的属性的元素，其值结尾为 value 子字符串

a[href$='.jpg'] {
  color: pink;
}

[attr*=value] 匹配带有一个名为 attr 的属性的元素，其值的字符串中的任何地方，至少出现了一次 value 子字符串。

a[href*='btn'] {
  color: pink;
}

伪选择器

伪类

p:lang(language) 为 <p> 元素的 lang 属性选择一个开始值

input:focus 选择元素输入后具有焦点
a:link  选择所有未访问链接
a:visited 选择所有访问过的链接
a:active   选择正在活动链接
a:hover     把鼠标放在链接上的状态
input:valid  选择所有有效值的属性
#line:target    选择当前活动 #line 元素(点击 URL 包含锚的名字)
input:required 选择有 "required" 属性指定的元素属性
input:read-write 选择没有只读属性的元素属性
input:read-only 选择只读属性的元素属性
input:out-of-range  选择指定范围以外的值的元素属性
input:optional  选择没有"required"的元素属性

/* CSS3 新增选择器 */
input[type="text"] 属性选择器
:root 选择文档的根元素，等同于 html 元素
:empty 选择没有子元素的元素
:target 选取当前活动的目标元素
:not(selector) 选择除 selector 元素意外的元素

/* 表单 */
input:enabled 选择可用的表单元素
input:disabled 选择禁用的表单元素
input:checked 选择被选中的表单控件元素(单选框或复选框)

p:nth-child(n) 匹配父元素下指定子元素，在所有子元素中排序第 n。还有 add、oven
p:nth-last-child(n) 选择所有 p 元素倒数的第二个子元素
p:nth-of-type(n) 选择所有 p 元素第二个为 p 的子元素
p:nth-last-of-type(n) 选择所有 p 元素倒数的第二个为 p 的子元素

p:first-child  选择器匹配属于任意元素的第一个子元素的 p 元素
p:last-child    选择所有 p 元素的最后一个子元素
p:only-child    选择所有仅有一个子元素的 p 元素
p:only-of-type  选择属于其父元素唯一的 p 元素的每个 p 元素
p:first-of-type 选择的每个 p 元素是其父元素的第一个 p 元素
p:last-of-type 选择属于其父元素的最后 p 元素的每个 p 元素

伪元素

p::selection    选择用户选择的元素部分。
p::before    在每个 p 元素之前插入内容
p::after    在每个 p 元素之后插入内容
p::first-line   选择每个 p 元素的第一行
p::sfirst-letter 选择每个 p 元素的第一个字母

常见的问题

伪类和伪元素之间有什么区别？

伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿。CSS3 为了区分两者，明确规定伪类用一个冒号（:）来表示，而伪元素则用两个冒号（::）来表示。但因为兼容性的问题，所以现在大部分还是统一的单冒号，但是抛开兼容性的问题，我们在书写时应该尽可能养成好习惯，区分两者。

  • IE6-7 不支持 :focus。

  • 伪类名称对大小写不敏感。

  • 伪元素也有人称为伪对象

CSS 属性 content 有什么作用？

content 属性专门应用在 before/after 伪元素上，用于插入额外内容或样式

a::before {
  content: attr(data-icon);
}

CSS 选择器的优先级（特异性）是什么？

MDN：浏览器通过优先级来判断哪些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。

CSS 权重和优先级

  • 权重分为四级，分别是：

    • 内联样式，如 style="xxx"，权值为 1000；

    • ID 选择器，如 #content，权值为 100；

    • 类、伪类和属性选择器，如 .content、:hover、[attribute]，权值为 10；

    • 元素选择器和伪元素选择器，如div、p，权值为 1。

  • 相同权重，定义最近者为准：行内样式 > 内部样式 > 外部样式 > 导入样式

  • 含外部载入样式时，后载入样式覆盖其前面的载入的样式和内部样式

  • 选择器优先级：!important > id > class > tag

  • 在同一组属性设置中，!important 优先级最高，高于行内样式

  • 注意：通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以他们的权值都为 0。 权重值大的选择器其优先级也高，相同权重的优先级又遵循后定义覆盖前面定义的情况。

更多请查看：优先级 和 CSS3 选择器优先级

浏览器如何解析 CSS 选择器？

浏览器从右往左解析 CSS 选择器，这样的匹配节点的方式能有快速、准确的与 render 树上的节点进行匹配，避免了许多无效匹配。浏览器需要评估的规则越少，样式引擎执行的速度就越快。

Why do browsers match CSS selectors from right to left?