## 选择器与选择器的组合在我们的日常工作中，CSS的使用虽然没有JS那么多，但也不容小觑。CSS的知识点比较多，我们挑选了其中比较常用的几个点来为大家介绍，希望可以帮助大家更好地理解CSS的使用。话不多说，让我们开始吧！ ### 选择器选择器的基本意义是：根据一些特征，选中元素树上的一批元素。选择器可以分为以下几个结构: - 简单选择器：针对某一特征判断是否选中元素。 - 复合选择器：连续写在一起的简单选择器，针对元素自身特征选择单个元素。 - 复杂选择器：由` `、`>`、`~`、`+`、`||`等符号连接的符合选择器，根据父元素或前序元素检查单个元素。 - 选择器列表：由`,`分隔的复杂选择器，表示或的关系。 *本质：选择器是由简单选择器逐级组合而成的结构* #### 简单选择器简单选择器常见的有`类型选择器`、`全体选择器`、`id选择器`、`class选择器`、`属性选择器`、`伪类选择器`这几种。 **类型选择器** 类型选择器，会根据一个元素的标签名来选中元素，比如我们常见的`

`、`

`、``。 ```js // example div { width: 100%; } p { font-size: 32px; } img { width: 100%; height: 100%; } ``` **全体选择器** 全体选择器（又称通配符选择器）`*`可以选中任意元素，用法跟类型选择器是完全一致的。 ```js // example * { margin: 0; padding: 0; } ``` **id选择器** id 选择器是“#”号后面跟随 id 名。 ```js // example #myid { stroke:blue; stroke-width:1; } ``` **class选择器** class 选择器是“.”后面跟随 class 名。 ```js // example .mycls { font-size:40px } ``` **属性选择器** 属性选择器根据 HTML 元素的属性来选中元素。我们先定义一个简单的DOM结构，用于了解属性选择器的用法。 ```html // DOM结构

标题1不带title属性

标题2带title属性

标题3带title属性

链接带title属性超链接用连字符分割 ``` 属性选择器有四种形态： - [att] 直接在方括号中放入属性名，是检查元素是否具有这个属性，只要元素有这个属性，不论属性是什么值，都可以被选中。 ```js // 所有具有title属性的元素，都可以被选中，将文字颜色设置为red [title] { color: red; } ``` - [att=val] 精确匹配，检查一个元素属性的值是否是 val。 ```js // 所有具有title属性，并且title的值为a的元素，都可以被选中，将文字颜色设置为blue [title=a] { color: blue; } ``` - [att~=val] 一个元素的某个属性的值有很多个（被空格分开），这些值只要有一个匹配上了 val 就行。 ```js // 具有title属性，并且属性值（被空格分开）中有three的元素，可以被选中，将文字的颜色设置为green [title~=three] { color: green; } ``` - [att|=val] 开头匹配，检查一个元素的值是否是以 val 开头，它跟精确匹配的区别是属性只要以 val 开头即可，后面内容不管。 ```js // 具有title属性，并且属性值以h开头的元素，可以被选中，将文字的背景设置为pink。 [title|=h] { background: pink; } ``` **伪类选择器** 伪类选择器是一系列由 CSS 规定好的选择器，`以:开头`。伪类选择器有普通型和函数型两种。我们这里只介绍一些常用的伪类选择器。 *链接相关* *元素位置相关* 先定义一个简单的DOM结构，用于理解与元素位置相关的伪类选择器。 ```js

node1
node2
node3
node4
node5
node6
node7
node8

``` - first-child ```js // ul列表中的第一个子节点（即

node1

）的颜色设为red ul :first-child { color: red } ``` - last-child ```js // ul列表中的最后一个子节点（即

node8

）的颜色设为green ul :last-child { color: green } ``` - nth-child(条件) ```js // ul列表中的满足条件的子节点的颜色设为yellow，这里将满足2n（即偶数条件）的子节点设为yellow ul :nth-child(2n) { color: yellow } ``` - nth-last-child(条件) 与nth-child(条件)类似，只不过这个是从后往前数 - nth-of-type(条件) - nth-last-of-type(条件) 与nth-of-type(条件)类似，只不过这个是从后往前数 *注意：nth-child 和 nth-child-type 的区别* of-type 系列，是一个变形的语法糖，S:nth-of-type(An+B) 是:nth-child(|An+B| of S) 的另一种写法 #### 选择器的组合选择器列表是用`,`分隔的复杂选择器序列；复杂选择器则是用` `、`>`、`~`、`+`、`||`等符号连接的复合选择器；复合选择器则是连写的简单选择器组合。 **优先级比较** - 第一优先级：无连接符号，即复合选择器。复合选择器表示简单选择器中`且`的关系。 ```js // 复合选择器 .a.b { color: pink; } ``` 上述代码表示选中的元素必须同时具有a、b两个class。 - 第二优先级：` `、`>`、`~`、`+`、`||`，即复杂选择器。复杂选择器是针对节点关系的选择，它包括五种连接方式，我们来一一介绍： - ` `: 后代，表示选中所有符合条件的`后代节点`，后代节点是指在当前节点下的所有节点。 - `>`: 子代，表示选中符合条件的`子节点`，子节点是指在当前节点下一级的所有节点。 - `~`: 后继，表示选中所有符合条件的后继节点，后继节点即跟当前节点具有同一个父元素，并出现在它之后的节点。 - `+`: 直接后继，即下一个后继节点。 - `||`: 列选择器，表示选中对应列中符合条件的单元格。我们比较常用的是后代` `和子代`>`这两种连接方式，来看个例子🌰： ```js // DOM结构

后代

// 后代选择器，选中class a 节点下所有class 为 b 的节点 .a .b { width: 100px; } // 子代选择器，选择class a节点下一级所有class 为 b 的节点 .a>.b { width: 100px; } ``` - 第三优先级：`,`，即选择器列表选择器列表`,`表示“或”的关系，实际上，可以把它理解为“两条内容一样的 CSS 规则”的一种简写。下面的写法1其实就等同于写法2，将具有class为 root 或 root2 的节点选中，置为灰色。 ```js // DOM结构

root

root2

// 写法1 .root,.root2 { cilor: grey; } // 写法2 .rrot { color: grey; } .root2 { color: grey; } ``` #### 选择器的优先级 CSS 选择器是基于规则生效的，同一个元素命中多条规则是非常常见的事情。不同规则指定同一个属性为不同值时，就需要一个机制来解决冲突。这个机制，就是接下来我们要讲的选择器优先级。 **css标准用用一个三元组(a,b,c)来构成复杂选择器的优先级** - id的数目记为a - 伪类和class的数目记为b - 伪元素和类型的数目记为c - `*` 不影响优先级 CSS 标准建议用一个足够大的进制，获取“ a-b-c ”来表示选择器优先级。即`specificity = base * base * a + base * b + c`。 base是一个足够大的正整数，这样就可以确保id`优先于` class和伪类 `优先于` 类型和伪元素 *补充：行内属性的优先级永远高于 CSS 规则，浏览器提供了一个“口子”，就是在选择器前加上`!import`，这时的优先级最高。 **同一优先级的选择器遵循“后面的覆盖前面的”原则** - *这里的覆盖是指出现在css样式表中的顺序，而不是class中的顺序* - *选择器的优先级是针对单条规则的，多条规则的选择器同时命中元素，优先级不会发生叠加。* - *选择器的优先级是针对复杂选择器的优先级，选择器列表不会合并计算优先级。* 来看个示例： ```js // DOM结构

text

// css样式 .x, .z { background-color:lightblue; } .y { background-color:lightgreen; } ``` 上述代码中，有两个点需要注意： 1. 选择器列表`.x`, `.z`命中了 div，但是它的两项分别计算优先级，所以最终优先级仍跟`.y` 规则相同。 2. 因为`.y`在样式表出现在最后，所以最终的样式以`.y`为准，即背景色为浅绿色。 ### 总结在这一节，我们详细介绍了CSS的选择器及选择器的组合，还补充了选择器的优先级机制。接下来我们会继续介绍其他CSS知识。我是何以庆余年，如果文章对你起到了帮助，希望可以点个赞，谢谢！如有问题，欢迎在留言区一起讨论。