CSS3所有的选择器

CSS是层叠样式表（Cascading Style Sheets）的简称，并且它是增量式，向后兼容，所以它支持CSS3以前的所有的版本，当然包括CSS2的内容，CSS3也称作级联样式表或者是层级样式表。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。 下面均以举例来说明： 1，通配符选择器：全局有效 *{ padding:0; }

2，元素选择器：也叫标签选择器,所有指定元素都有效

div{ padding:0; }

3，类选择器：class选择器，所有带有同名class有效

.class{ padding:0; }

4，ID选择器：所有带有同一个id有效,但是id最好是设置唯一的

#id{ padding:0; }

5，后代选择器：某元素后代的元素

div span {color:red;}

6，子元素选择器：某元素直接的子元素

div > span{color:red;}

7，相邻兄弟元素选择器：相同父元素下某个元素紧接的下一个元素 弟弟变红

div + article{color:red;}

8，通用兄弟选择器：相同父元素下，某元素后面所有兄弟元素

弟弟全红 div ~ article { color: red; }

9，群组选择器：相同样式的元素分组在一起用逗号隔开 div,p,ul,ol,dl{ color:red; }

10，属性选择器：带有指定属性的元素设置样式 a[href]{ text-decoration: none; } 带有href属性的a标签都会生效。

a[href="#"]{ color:#f00; } href="#"的a标签都会生效。

a[class~="two"]{ color:#f00; } class中包含类名为two的a标签都会生效。

a[href^="#"]{ color:#f00; } href属性值以"#"开头的a标签都会生效。

a[href$="#"]{ color:#f00; } href属性值以"#"结尾的a标签都会生效。

a[href*="#"]{ color:#f00; } href属性值包含关键字"#"的a标签都会生效。

a[href|="#"]{ color:#f00; } href属性值以"#-"开头的a标签都会生效。