CSS选择器分类梳理并高亮重点
前言
主要内容来自菜鸟教程
CSS 选择器 | 菜鸟教程
分类是我自己理解的分类，示例说明优化统一了表述风格。
正文
| 选择器 | CSS | 示例 | 示例说明 |
| 基础 | |||
| * | 2 | * | 选择所有元素 |
| :root | 3 | :root | 选择文档的根元素 |
| element | 1 | p | 选择所有<p>元素 |
| :not(selector) | 3 | :not(p) | 选择所有并非p元素的元素 |
| element,element | 1 | div,p | 选择所有<div>元素和 <p> 元素 |
| #id | 1 | #firstname | 选择所有id="firstname"的元素 |
| .class | 1 | .intro | 选择所有class="intro"的元素 |
| element.class | 1 | p.hometown | 选择所有 class="hometown" 的 <p> 元素 |
| 位置关系 | |||
| element element | 1 | div p | 选择<div>元素内的所有<p>元素 |
| element>element | 2 | div>p | 选择所有父级是 <div> 元素的 <p> 元素 |
| element1~element2 | 3 | p~ul | 选择p元素之后的所有ul元素 |
| element+element | 2 | div+p | 选择所有 <div> 元素之后紧跟的第一个 <p> 元素 |
| :first-letter | 1 | p:first-letter | 选择所有<p>元素的第一个字母 |
| :first-line | 1 | p:first-line | 选择所有<p>元素的第一行 |
| :before | 2 | p:before | 在所有<p>元素之前插入内容 |
| :after | 2 | p:after | 在所有<p>元素之后插入内容 |
| 包含关系 | |||
| :first-of-type | 3 | p:first-of-type | 选择是其父级第一个p元素的所有p元素 |
| :nth-of-type(n) | 3 | p:nth-of-type(2) | 选择是其父级第二个p元素的所有p元素 |
| :last-of-type | 3 | p:last-of-type | 选择是其父级最后一个p元素的所有p元素 |
| :nth-last-of-type(n) | 3 | p:nth-last-of-type(2) | 选择是其父级倒数第二个p元素的所有p元素 |
| :only-of-type | 3 | p:only-of-type | 选择是其父级唯一p元素的所有p元素 |
| :empty | 3 | p:empty | 选择没有任何子级的所有p元素（包括文本节点） |
| 父子关系 | |||
| :first-child | 2 | p:first-child | 选择是其父级第一个子级的所有p元素 |
| :nth-child(n) | 3 | p:nth-child(2) | 选择是其父级第二个子元素的所有p元素 |
| :last-child | 3 | p:last-child | 选择是其父级最后一个子级的所有p元素 |
| :nth-last-child(n) | 3 | p:nth-last-child(2) | 选择是其父级倒数第二个子级的所有p元素 |
| :only-child | 3 | p:only-child | 选择是其父级唯一子级的所有p元素 |
| 属性 | |||
| [attribute] | 2 | [target] | 选择所有设置target属性元素 |
| [attribute=value] | 2 | [target=-blank] | 选择所有target属性等于="-blank"的元素 |
| :lang(language) | 2 | p:lang(it) | 选择所有lang属性的起始值="it"的<p>元素 |
| [attribute|=language] | 2 | [lang|=en] | 选择所有lang 属性等于 en，或者以 en- 为开头的元素 |
| [attribute^=value] | 3 | a[src^="https"] | 选择所有src属性的值以"https"开头的元素 |
| [attribute$=value] | 3 | a[src$=".pdf"] | 选择所有src属性的值以".pdf"结尾的元素 |
| [attribute*=value] | 3 | a[src*="runoob"] | 选择所有src属性的值包含子字符串"runoob"的元素 |
| [attribute~=value] | 2 | [title~=flower] | 选择所有title属性包含单词"flower"的元素 |
| 链接状态 | |||
| :link | 1 | a:link | 选择所有未访问链接 |
| :visited | 1 | a:visited | 选择所有访问过的链接 |
| :active | 1 | a:active | 选择活动链接 |
| :hover | 1 | a:hover | 选择鼠标在链接上面时 |
| :target | 3 | #news:target | 选择当前活动的#news元素（包含该锚名称的点击的URL） |
| 表单状态 | |||
| :focus | 2 | input:focus | 选择获取焦点的input元素 |
| :enabled | 3 | input:enabled | 选择所有已启用的输入元素 |
| :disabled | 3 | input:disabled | 选择所有禁用的输入元素 |
| :checked | 3 | input:checked | 选择所有选中的输入元素 |
| ::selection | 3 | ::selection | 选择被用户选中或处于高亮状态的部分 |
| 表单属性 | |||
| :out-of-range | 3 | :out-of-range | 选择值在指定区间之外的input元素 |
| :in-range | 3 | :in-range | 选择值在指定区间之内的input元素 |
| :read-write | 3 | :read-write | 选择可读及可写的元素 |
| :read-only | 3 | :read-only | 选择设置 "readonly"（只读） 属性的元素 |
| :optional | 3 | :optional | 选择可选的输入元素 |
| :required | 3 | :required | 选择设置 "required" 属性的元素 |
| :valid | 3 | :valid | 选择输入值合法的元素 |
| :invalid | 3 | :invalid | 选择输入值非法的元素测试代码 |
测试代码
<!DOCTYPE >
<html><head><meta charset="utf-8" /><metaname="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/><title>测试css</title><style>div {width: 400px;min-height: 100px;border: 1px solid #999;}div + p {color: red;}p.testp::first-letter {color: blue;font-weight: bold;font-size: 2rem;}p.testp::first-line {background-color: #ccc;}p:first-of-type {font-size: 2rem;}p:empty {width: 200px;height: 36px;background-color: green;}</style></head><body><div class="test1">测试div1</div><div><p>测试p，文档中第一个p</p><p>测试p，文档中第二个p</p></div><p>测试p1</p><div class="test2">测试div2</div><p>测试p2</p><div class="test3">测试div3</div><p>测试p3</p><hr /><p class="testp">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, idprovident! Ex eum harum recusandae, ab ut, enim odit necessitatibusimpedit eligendi soluta, magnam eveniet perferendis a nihil hic minima.</p><p></p><script></script></body>
</html>