| ID 选择器 | #app |
|
|---|---|---|
| 类选择器 | .container |
|
| 标签选择器 | div、 p |
|
| 一般兄弟选择器 | p ~ span |
匹配同一父元素下，p 元素后的所有 span 元素 |
| 紧邻兄弟选择器 | h1 + p |
紧贴在 h1 后面的第一个 p 标签。同级标签，之间不能有其他标签 |
| 并集选择器 | .one, p |
给 类名 为 one，标签为 p 标签的元素共同设置 |
| 子代选择器 | ul > li |
ul 标签下的下一个层级的 li ，并不是所有 |
| 后代选择器 | li a |
和子代选择器不同，可以选择多层嵌套的后代元素，无论嵌套层次有多深 |
| 通配符选择器 | * |
| 名称 | 子类 | 语法 | 说明 | 例子 |
|---|---|---|---|---|
| 简单属性选择器 | element[attribute] |
选择具有指定属性的元素，无论属性值是什么 | a[href]会选择所有带有 href 属性的 <a> 元素 |
|
| 具体属性值选择 | element[attribute="value"] |
选择具有指定属性且属性值完全匹配的元素 | input[type="text"]会选择所有 type 属性值为 "text" 的 <input> 元素 |
|
| 部分属性值选择（包含特定词汇） | element[attribute~="value"] |
选择属性值中包含指定词汇的元素。属性值可以是用空格分隔的多个值，只要其中一个值包含指定词汇，该元素就会被选中 | p[class~="important"]会选择 class 属性值中包含 "important" 的 <p> 元素 |
备注: p 标签的 class 属性中得包含 important 这个单词，且此单词必须独立存在。
正例: <p class="text-center important">...</p>
反例: <p class="text-center !important">...</p> |
| 子串匹配属性选择器 | 以指定值开头 | element[attribute^="value"] | 匹配属性值以指定值开头的元素 | a[href^="https"]会选择所有 href 属性值以 "https" 开头的 <a> 元素 |
| | 以指定值结尾 | | 匹配属性值以指定值结尾的元素 | img[src$=".jpg"]会选择所有 src 属性值以 .jpg 结尾的 <img> 元素 |
| | 包含指定值 | | 匹配属性值中包含指定值的元素 | p[title*="example"]会选择所有 title 属性值中包含 "example" 的 <p> 元素 |
| 特定属性选择类型（竖线匹配） | | element[attribute|="value"] | 选择带有指定属性，并且属性值以指定值或者以指定值加横杠（value-）开头的元素。通常用于选择语言属性等。 | [lang|="en"]会选择所有 lang 属性值为 "en" 或者以 "en-" 开头的元素 |
| 条件连写 | | element[key1=value1][key2=value2][key3=value3]... | 表示当前元素需要同时具备才会出现效果 | |
https://codepen.io/JingW/pen/VwoygvQ
.mod-nav header h3 span
.mod-nav ul a
匹配规则：
**因为写样式是可以越级设置的，**例如 .mod-nav ul a 的这个 a 不一定是直接挂载到 .mod-nav 下的 li 上的 ，有可能像上图所示在其很深层级的位置。
a 元素，然后找符合父元素中有 ul 的，如此向上过滤，只用“顺藤摸瓜”匹配一条线上的就好。CSS选择器的匹配规则的解析是一个从右向左的过程，这样的解析顺序是出于性能优化的考虑。以下是详细解析原理和原因：
解析原理
1. 从右向左匹配的步骤