美文网首页
--- > CSS3-选择器

--- > CSS3-选择器

作者: 風隨風去 | 来源:发表于2017-03-24 23:02 被阅读0次

    基本选择器

    层次选择器

    • F E
    • F>E
    • F+E
    • F~E

    伪类选择器

    动态伪类选择器

    • :link
    • :visited
    • :hover
    • :active
    • :focus

    爱恨原则( LoVe/HAte)

    目标伪类选择器

    :target

    结构伪选择器

    • E:first-child
    • E:last-child
    • E:only-child 只有一个子元素
    • E:empty 没有子元素
    • E:root
    • E:nth-child(n)
    • E:nth-last-child(n)
    • E:nth-of-type(n)
    • E:nth-last-of-type(n)
    • E:fist-of-type
    • E:last-of-type

    n的含义

    例子: 新浪头部

    odd(奇数) even(偶数)

    :checked

    择器匹配每个已被选中的 input 元素

    例子: 模拟单选框

    否定伪类选择器

    • E:not(F)

    伪元素

    • ::first-letter
    • ::first-line
    • ::selection
    • ::fefore
    • ::after

    属性选择器

    • E[attr=value]
    • E[attr|=value]

    且该属性的值为“value”,或者该属性的值以“value-“(”-“为连字符)开头的元素

    • E[attr~=value]
      且该属性的值是一个以空格作为分隔的值列表,其中一个值为"value"的元素
    • E[attr*=value]
    • E[attr^=value]
    • E[attr$=value]

    例子:百度百科

    相关文章

      网友评论

          本文标题:--- > CSS3-选择器

          本文链接:https://www.haomeiwen.com/subject/chrlpttx.html