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都不支持。