0
点赞
收藏
分享

微信扫一扫

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


http://www.blueidea.com/tech/web/2009/6930_2.asp

选择器

属性选择器

  1.  
  2.   匹配包含以特定的值开头的属性的元素  
  3.  
  4.   匹配包含以特定的值结尾的属性的元素  
  5.  
  6.   匹配包含含有特定的值的属性的元素  

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

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

  1.  
  2.   ……  
  3. }  

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

连接符

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

  1.  
  2.     color:red;  
  3.   

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

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

  1.  
  2.      background-color:red;  
  3. }  

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

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

  1.  
  2.      background-color:red;  
  3. }  

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

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

  1.  
  2.      background-color:red;  
  3. }  

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

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

  1. :checked{  
  2.       ……  
  3. }  

input :checked{ …… }

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

  1. :empty(){  
  2.     background-color:red;  
  3. }  

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

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

  1. :not([class="item"]){  
  2.     background-color:red;  
  3.   

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

  • 上例:将p中没有item类的p背景设置为红色,在ubuntu下的ff下没有测试成功。
    其他的伪类::only-child, :root, 

伪元素

::selection

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

相关推荐

CSS3之选择器

CSS3选择器

Css3笔记-选择器

css3新增选择器

CSS3 新特性

CSS3新特性

0 条评论