美文网首页
CSS3选择器

CSS3选择器

作者: 璐璐熙可 | 来源:发表于2018-06-01 19:53 被阅读208次

    CSS3 属性选择器

    1.E [attr]

    只使用属性名,但没有确定任何属性值

    2.E [attr="value"]

    指定属性名,并指定了该属性的属性值

    3.E [attr~="value"]

    指定属性名,并且具有属性值,此属性值是一个词列表,其中词列表中包含了一个value词,而且等号前面的“〜”不能不写

    4.E [attr^="value"]

    指定了属性名,并且有属性值,属性值是以value开头的

    CSS3 结构性伪类

    1.E:nth-child(n)

    表示E父元素中的第n个子节点(从 1 开始)
    参数也可以是一个表达式,2n+1 -> 匹配第奇数个子元素,n 从 0 开始

    2.E:nth-last-child(n)

    表示E父元素中的第n个子节点,从后向前计算

    3.E:first-child

    表示E父元素中的第一个子节点

    4.E:last-child

    表示E父元素中的最后一个子节点

    注意(选择器: nth-of-type和nth-last-of-type选择器来避免这类问题的发生。使用这两个选择器时,css3在计算子元素是第奇数个子元素还是第偶数个子元素时,就只针对同类型的子元素进行计算了。)

    5.E:nth-of-type(n)

    表示E元素中的第n个子节点,且类型为E

    6.E:nth-last-of-type(n)

    表示E元素中的第n个字节点,且类型为E , 从后向前计算

    7.E:first-of-type

    表示E元素中的第一个子节点且节点类型是E的

    8.E:last-of-type

    表示E元素中的最后一个子节点且节点类型是E的

    CSS3 其他伪元素

    1.E:before

    生成内容在E元素前

    2.E:after

    生成内容在E元素后

    3.E :not(selector)

    表示匹配E元素中除了 selector 的元素

    相关文章

      网友评论

          本文标题:CSS3选择器

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