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$=".png"]{width: 100%}选择src 为 .png 结尾的 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" />

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