001 CSS3 选择器一览表

1. 选择器

   版本 1

   选择器示例说明class.test{color: red}选择class="test"的标签id#test{color:red}选择id="test"的标签elementp{color: red}选择所有 p 标签element, elementdiv, p {}选择所有div和p后代
   element elementul li {border: 1px solid red;}选择ul的所有li后代（包括儿子 孙子 重孙...）
   :linka:link {color: black;}选择所有未访问链接:visiteda:visited {color: red;}选择所有访问过的链接:hovera:hover {color: #fff}鼠标悬浮触发:activea:active {background: yellow;}选择活动链接(按住鼠标不松开触发)
   （注:在CSS定义中，:active必须位于:hover之后！）:first-letterh1:first-letter{font-size: 200%}选择h1中以第一个字
   :first-linep:first-line {background: yellow}选择每个<p>元素的第一行

   版本 2

   选择器示例说明** {padding: 0;}选择所有标签父子element>element.list > li {border: 1px solid red;}选择class="list"的所有儿子li
   兄弟element+elementh1+p {color: red}在h1后面选一个p兄弟
   属性
   [attribute][type] {display: block;}选择带有 type 属性的标签属性等于
   [attribute=value][type=text] {display: block;}选择type属性值为text的标签属性包含
   [attribute~=value][eyes~=小眼睛] {display:none}选择所有eyes属性包含小眼睛的元素
   (<span eyes="单眼皮 小眼睛">)[attribute|=word][eyes|="小眼睛"]
   （常与attribute^=value混淆）选择eyes属性为小眼睛开头的元素；
   这个值必须是完整的单词(或者后面跟着连字符" - ")
   如：eyes="小眼睛-李荣浩":focusinput:focus{backgroundr:yellow;}选择具有焦点的输入元素大儿子
   element:first-childh1:first-child{color: red}选择一个h1标签并且是其父元素的第一个元素
   (h2:first-child 不会选中，因为h2是二儿子)
   :beforespan:before在每个<span>元素之前插入内容:afterspan:after在每个<span>元素之后插入内容

   版本 3

   选择器示例说明酒场兄弟
   element1~element2h1~p {color: red}版本2的只能选一个兄弟，版本3能选h1后面所有p兄弟
   属性开头
   [attribute^=value][name^="李"]{border: 1px solid red;}选择所有name属性以‘李’开头的元素，^ 类似正则属性结尾
   [attribute$=value]img[src$=".webp"]{width: 100%}选择src 为 .webp 结尾的 img 元素
   （切记element后面不要带空格）属性包含
   [attribute*=value][name*="李"]{width: 100%}选择所有name属性包含‘李’开头的元素:first-of-typeli:first-of-type{}选择所有li并且是其父元素的第一个
   :last-of-typeli:last-of-type{}选择所有li并且是其父元素的最后一个
   :only-of-typeh2:only-of-type{}选择一个h2并且它是唯一一个
   (h1:only-of-type 不会选中因为不是唯一)
   :only-childh2:only-child{}选择一个h2并且是其父元素的独子
   (div1 生了4个所以选不了他的h2)
   :nth-child(n)div:nth-child(1){}选择一个div并且是其父元素的第一个孩子
   :nth-last-child(n)div:nth-last-child(2){}选择一个div并且是其父元素的倒数第二个孩子
   :nth-of-type(n)p:nth-of-type(2)选择每个p元素是其父级的第二个p元素:nth-last-of-type(n)p:nth-last-of-type(2)选择每个p元素的是其父级的倒数第二个p元素小儿子
   element:last-childh1:last-child选择h1标签并且是其父元素的最后一个孩子:root:root{background: red}文档根元素伪类:emptyh1:empty{}选择一个h1标签并且没有子元素(空标签)<h1></h1>id:target#footer:target(:target)选择当前处于活动状态的锚点标签(不加id为所有锚点):not(selector):not(p)选择非 selector 元素的元素(即反选)::selection::selection{color: red}选择光标选中的文字:enabled【主要用于表单元素】
   input[type="text"]:enabled选择器匹配每个启用的的元素:disabled【主要用于表单元素】
   input[type="text"]:disabled选择器匹配每个禁用的的元素:checked【主要用于表单元素】
   input:checked选择器匹配每个选中的输入元素
   （仅适用于单选按钮或复选框）:out-of-range【主要用于表单校验】
   input:out-of-range{color: red;}选中【超出】设置范围的元素(input)
   <input type="number" min="5" max="10" />:in-range【主要用于表单校验】
   input:in-range{color:green}选中输入值【未超出】指定范围的元素:read-write【主要用于表单元素】
   input:read-write{border: 1px solid blue}选中【可写】状态的input:read-only【主要用于表单元素】
   input:read-only{background: gray;}选中【只读】状态的input:optional【主要用于表单校验】
   input:optional{border: 1px solid black}选中【非必填】状态的input:required【主要用于表单校验】
   input:required{border: 1px solid red}选中【必填】状态的input
<input required />:valid【主要用于表单校验】
   input:valid{color: green}选中 输入email【合法】的input
<input type="email" />:invalid【主要用于表单校验】
   input:valid{border: 1px solid red}选中 输入email【不合法】的input
<input type="email" />

如有错误，欢迎指正，谢谢