CSS选择器的语法规则

电玩女神 2022-05-12 09:44 255阅读 0赞

.class
    
    .intro
    
    选择class="intro"的所有节点
    
    #id
    
    #firstname
    
    选择id="firstname"的所有节点
    
    *
    
    *
    
    选择所有节点
    
    element
    
    p
    
    选择所有p节点
    
    element,element
    
    div,p
    
    选择所有div节点和所有p节点
    
    element element
    
    div p
    
    选择div节点内部的所有p节点
    
    element>element
    
    div>p
    
    选择父节点为div节点的所有p节点
    
    element+element
    
    div+p
    
    选择紧接在div节点之后的所有p节点
    
    [attribute]
    
    [target]
    
    选择带有target属性的所有节点
    
    [attribute=value]
    
    [target=blank]
    
    选择target="blank"的所有节点
    
    [attribute~=value]
    
    [title~=flower]
    
    选择title属性包含单词flower的所有节点
    
    :link
    
    a:link
    
    选择所有未被访问的链接
    
    :visited
    
    a:visited
    
    选择所有已被访问的链接
    
    :active
    
    a:active
    
    选择活动链接
    
    :hover
    
    a:hover
    
    选择鼠标指针位于其上的链接
    
    :focus
    
    input:focus
    
    选择获得焦点的input节点
    
    :first-letter
    
    p:first-letter
    
    选择每个p节点的首字母
    
    :first-line
    
    p:first-line
    
    选择每个p节点的首行
    
    :first-child
    
    p:first-child
    
    选择属于父节点的第一个子节点的所有p节点
    
    :before
    
    p:before
    
    在每个p节点的内容之前插入内容
    
    :after
    
    p:after
    
    在每个p节点的内容之后插入内容
    
    :lang(language)
    
    p:lang
    
    选择带有以it开头的lang属性值的所有p节点
    
    element1~element2
    
    p~ul
    
    选择前面有p节点的所有ul节点
    
    [attribute^=value]
    
    a[src^="https"]
    
    选择其src属性值以https开头的所有a节点
    
    [attribute$=value]
    
    a[src$=".pdf"]
    
    选择其src属性以.pdf结尾的所有a节点
    
    [attribute*=value]
    
    a[src*="abc"]
    
    选择其src属性中包含abc子串的所有a节点
    
    :first-of-type
    
    p:first-of-type
    
    选择属于其父节点的首个p节点的所有p节点
    
    :last-of-type
    
    p:last-of-type
    
    选择属于其父节点的最后p节点的所有p节点
    
    :only-of-type
    
    p:only-of-type
    
    选择属于其父节点唯一的p节点的所有p节点
    
    :only-child
    
    p:only-child
    
    选择属于其父节点的唯一子节点的所有p节点
    
    :nth-child(n)
    
    p:nth-child
    
    选择属于其父节点的第二个子节点的所有p节点
    
    :nth-last-child(n)
    
    p:nth-last-child
    
    同上，从最后一个子节点开始计数
    
    :nth-of-type(n)
    
    p:nth-of-type
    
    选择属于其父节点第二个p节点的所有p节点
    
    :nth-last-of-type(n)
    
    p:nth-last-of-type
    
    同上，但是从最后一个子节点开始计数
    
    :last-child
    
    p:last-child
    
    选择属于其父节点最后一个子节点的所有p节点
    
    :root
    
    :root
    
    选择文档的根节点
    
    :empty
    
    p:empty
    
    选择没有子节点的所有p节点（包括文本节点）
    
    :target
    
    #news:target
    
    选择当前活动的#news节点
    
    :enabled
    
    input:enabled
    
    选择每个启用的input节点
    
    :disabled
    
    input:disabled
    
    选择每个禁用的input节点
    
    :checked
    
    input:checked
    
    选择每个被选中的input节点
    
    :not(selector)
    
    :not
    
    选择非p节点的所有节点
    
    ::selection
    
    ::selection
    
    选择被用户选取的节点部分