选择器
-
属性选择器
例子:所有的id以“item”开始的div元素的样式(1)[att^="value"] 匹配包含以特定的值开头的属性的元素 (2)[att$="value"] 匹配包含以特定的值结尾的属性的元素 (3)[att*="value"] 匹配包含含有特定的值的属性的元素
浏览器支持:IE6不支持。div[id^="item"]{ …… }
-
连接符
“~”它针对一个元素的有同一个父级节点的所有兄弟级别元素。
上例:将id为item结尾的div的同父辈的p中的字体颜色改为红色。浏览器支持:IE6不支持。div[id$="item"]~p{ color:red; }
-
伪类(同jquery中获取子元素的方式相同)
上例:第1、3、5、7、9个p的背景变成红色。p:nth-child(2n+1){ background-color:red; }
上例:最后两个p的背景变成红色。p:nth-last-child(-n+2){ background-color:red; }
上例:最后一个p的背景变成红色。p:last-child(){ background-color:red; }
上例:为选中的复选框指定样式input :checked{ …… }
上例:将空的td的背景设为红色。td :empty(){ background-color:red; }
上例:将p中没有item类的p背景设置为红色,在ubuntu下的ff下没有测试成功。p :not([class="item"]){ background-color:red; }
其他的伪类::only-child, :root, :target, :enabled 和:disabled等。方法类似。 -
伪元素
在CSS3中唯一引入的伪元素是::selection.它可以让你指定被用户高亮(选中)的元素。::selection
浏览器支持:Safari, Opera 和Chrome。ie和ff都不支持。
摘录于:CSS3新特性一览 感谢vocal整理。