001 CSS3 选择器一览表

发布于 2022年 04月 07日 21:47

  1. 选择器

    版本 1

    选择器示例说明
    class.test{color: red}选择class="test"的标签
    id#test{color:red}选择id="test"的标签
    elementp{color: red}选择所有 p 标签
    element, elementdiv, p {}选择所有div和p
    后代
    element element
    ul 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-child
    h1:first-child{color: red}选择一个h1标签并且是其父元素的第一个元素
    (h2:first-child 不会选中,因为h2是二儿子)
    :beforespan:before在每个<span>元素之前插入内容
    :afterspan:after在每个<span>元素之后插入内容

    版本 3

    选择器示例说明
    酒场兄弟
    element1~element2
    h1~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-child
    h1: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" />

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

推荐文章