美文网首页
C3-目录→选择器

C3-目录→选择器

作者: Jianshu9527 | 来源:发表于2016-12-28 11:52 被阅读88次

    1 css2.1选择器

    • ( * ) 通配符选择器//选取全部元素
    • ( div ) 标签选择器//元素自身作为选择器
    • (.box) 类选择器//
    • (#box) id选择器
    • (div p) 后代选择器//元素div下面的有一个span子级元素
    • (div.box) 交集选择器
    • (div,box)并集选择器
    • 四类伪类元素
      • a:link
      • a:visited
      • a:hover//IE6只作用于a标签 IE7后作用于任何元素
      • a:active //IE6,7只作用于a,之后作用于任何元素

    2 css3选择器

    1 按照元素的属性来进行选择
    **IE7开始兼容

    • Element[att] //选择具有att属性的元素
    • Element[att="value"] //选择具有att属性的元素,并且属性值等于value的元素
    • Element[att*="value"] //选择具有att属性的元素,并且包含value的元素
    • Element[att^="value"] //选择具有att属性的元素,且属性值以value开头的元素
    • Element[att$="value"] //选择具有att属性的元素,且属性值以value结尾的元素
    • Element[att~="value"] //选择具有att属性的元素,且属性值以value是空格分割的独立元素

    2** 按照元素的关系来进行选择**

    • div span //div下面的子级元素span
    • div>span //div下面的第一个span子级元素
    • div+span //div紧靠的span元素
    • div~span //div后面所有的元素(IE7才开始兼容)

    4 css3伪类选择器

    • :root 根标签选择器
    • :nth-child() //选择父元素下面的n个孩子
    • :first-child() //选择是父母下面的第一孩子的元素(IE7才开始支持)
    • :last-child() //选择是父母下面的最后一个元素
    • :nth-last-child //选择其父母下面的倒数第N个孩子
    • :only-child //选择是独生子女的孩子
    • :nth-child(2n) //选择排行为偶数的元素
    • :nth-child(2n+1) //选择排行为奇数的元素
    • :nth-child(-n+3) //选择排行前三的元素

    5 css3伪类元素选择器

    • :before //表示在盒子内部的最前面插入一个新元素
    • :after //表示在元素内部的最后面插入一个新元素(IE8开始支持)

    相关文章

      网友评论

          本文标题:C3-目录→选择器

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