css3新特性笔记之“选择器”

选择器

• 属性选择器

  (1)[att^="value"]
     匹配包含以特定的值开头的属性的元素
  (2)[att$="value"]
     匹配包含以特定的值结尾的属性的元素
  (3)[att*="value"]
     匹配包含含有特定的值的属性的元素

  例子：所有的id以“item”开始的div元素的样式

  div[id^="item"]{
     ……
  }

  浏览器支持：IE6不支持。

• 连接符

  “～”它针对一个元素的有同一个父级节点的所有兄弟级别元素。

  div[id$="item"]~p{
       color:red;
  } 

  上例：将id为item结尾的div的同父辈的p中的字体颜色改为红色。浏览器支持：IE6不支持。

• 伪类(同jquery中获取子元素的方式相同)

  p:nth-child(2n+1){
        background-color:red;
  }

  上例：第1、3、5、7、9个p的背景变成红色。
  

  p:nth-last-child(-n+2){
        background-color:red;
  }
  

  上例：最后两个p的背景变成红色。
  

  p:last-child(){
        background-color:red;
  }

  上例：最后一个p的背景变成红色。
  

  input :checked{
         ……
  }

  上例：为选中的复选框指定样式
  

  td :empty(){
       background-color:red;
  }

  上例：将空的td的背景设为红色。
  

  p :not([class="item"]){
       background-color:red;
  } 

  上例：将p中没有item类的p背景设置为红色，在ubuntu下的ff下没有测试成功。
  其他的伪类：:only-child, :root,  :target, :enabled 和:disabled等。方法类似。

• 伪元素

  ::selection

  在CSS3中唯一引入的伪元素是::selection.它可以让你指定被用户高亮（选中）的元素。
  浏览器支持：Safari, Opera 和Chrome。ie和ff都不支持。

摘录于：CSS3新特性一览  感谢vocal整理。