搜索
您的当前位置:首页正文

C3-目录→选择器

来源:二三娱乐

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开始支持)
Top