-
选择器
版本 1
选择器 示例 说明 class .test{color: red} 选择class="test"的标签 id #test{color:red} 选择id="test"的标签 element p{color: red} 选择所有 p 标签 element, element div, p {} 选择所有div和p 后代
element elementul li {border: 1px solid red;} 选择 ul的所有li后代（包括儿子 孙子 重孙...）:link a:link {color: black;} 选择所有未访问链接 :visited a:visited {color: red;} 选择所有访问过的链接 :hover a:hover {color: #fff} 鼠标悬浮触发 :active a:active {background: yellow;} 选择活动链接(按住鼠标不松开触发)
（注:在CSS定义中，:active必须位于:hover之后！）:first-letter h1:first-letter{font-size: 200%} 选择 h1中以第一个字:first-line p:first-line {background: yellow} 选择每个 <p>元素的第一行版本 2
选择器 示例 说明 * * {padding: 0;} 选择所有标签 父子element>element .list > li {border: 1px solid red;} 选择 class="list"的所有儿子li兄弟element+element h1+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="小眼睛-李荣浩":focus input:focus{backgroundr:yellow;} 选择具有焦点的输入元素 大儿子
element:first-childh1:first-child{color: red} 选择一个 h1标签并且是其父元素的第一个元素
(h2:first-child不会选中，因为h2是二儿子):before span:before 在每个 <span>元素之前插入内容:after span:after 在每个 <span>元素之后插入内容版本 3
选择器 示例 说明 酒场兄弟
element1~element2h1~p {color: red} 版本2的只能选一个兄弟，版本3能选 h1后面所有p兄弟
属性开头
[attribute^=value][name^="李"]{border: 1px solid red;} 选择所有 name属性以‘李’开头的元素，^类似正则属性结尾
[attribute$=value]img[src$=".png"]{width: 100%} 选择 src为.png结尾的img元素
（切记element后面不要带空格）属性包含
[attribute*=value][name*="李"]{width: 100%} 选择所有 name属性包含‘李’开头的元素:first-of-type li:first-of-type{} 选择所有 li并且是其父元素的第一个:last-of-type li:last-of-type{} 选择所有 li并且是其父元素的最后一个:only-of-type h2:only-of-type{} 选择一个 h2并且它是唯一一个
(h1:only-of-type不会选中因为不是唯一):only-child h2: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} 文档根元素伪类 :empty h1: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" />
如有错误，欢迎指正，谢谢
