CSS（1、2）与CSS3中的选择器大家都知道css有三个简单常用的选择器，#id、class和标签选择器 。但是css3又新增了一些选择器，可以减少结构代码中ID属性和class属性的定义 。使用它们可以减少不少冗杂的代码，便捷开发 。下面介绍： 一.元素选择符选择符名称版本描述
通配选择符( )
CSS2
所有元素对象
比如 p、h1、div、a，甚至可以是 html 本身.
元素选择器
CSS1
最常见的 CSS 选择器是元素选择符 。换句话说，文档的元素就是最基本的选择器
#id
id选择符(ID )
CSS1
以唯一标识符id属性作为选择符，给元素对象添加样式
.class
class选择符(Class )
CSS1
以.class名作为选择符，给元素对象添加样式
二.关系选择符选择符名称版本描述
ul li
后代选择符
CSS1
后代选择符将会命中所有符合条件的后代，包括儿子，孙子，孙子的孙子...
ul>li
子代选择符
CSS2
与后代选择符(ul?li) 不同的是，子选择符只能命中子元素，而不能命中孙辈 。
E+F
相邻选择符
CSS2
与 兄弟选择符(E~F) 相同的是，相邻选择符也是选择同级的元素F；不同的是，相邻选择符只会命中符合条件的那个毗邻的兄弟元素（即紧挨着E元素之后的第一个F元素）
E~F
兄弟选择符
CSS3
兄弟选择符都是往后找，但是只找一个兄弟，而且这个兄弟必须是紧紧挨着的
三.属性选择符选择符名称描述
a[class]
CSS2
选择具有class名的a标签
input[type="text"]
CSS2
将会命中input标签中带有了type属性，并且属性值为text的符合条件的标签
div[class~="a"]
CSS2
将会命中div中class名为a的元素
li[class^="a"]
CSS3
选择具有class名且class名为以a开头的字符串的li标签,只要以a开头的class名都会被选中
li[class$="a"]
CSS3
选择具有class名且class名为以a结尾的字符串的li标签,只要以a结尾的class名都会被选中
li[class*="a"]

文章插图
CSS3
选择具有class名且class名包含a的字符串的li标签,只要包含a的class名都会被选中
li[class|="a"]
CSS3
选择具有class名且class名包含a开头并用连接符"-"分隔的字符串的li标签，如果class仅为a，也将被选择 。
1.div[class^="a"]选择具有class名且class名为以a开头的字符串的div,只要以a开头的class名都会被选中
此例，将会命中1, 2两个div，因为匹配到了class属性，且属性值以a开头
Document>div[class^="a"] {background-color: red;}1