CSS3选择器1

根据所获页面中元素的不同，可以把CSS3的选择器分为5大类：元素选择器、关系选择器、伪类选择器、属性选择器。

1、标签选择器
标签选择器是根据HTML标签名匹配同类型的所有标签。
一般常用标签选择器重置网页内标签的默认样式。
CSS3定义了一个特殊类型的选择器：通配选择器，使用（*）来表示，用来匹配所有标签。
一般使用通配选择器统一所有的标签样式，例如，使用下面样式可以清除所有标签的边距：

* {margin: 0; padding:0;}

2、类选择器
类选择器以点号（.）为前缀，后面为类名。应用方法：在标签中定义class属性，然后设置属性值为类选择器的名称。
当应用多个类样式时，类名之间通过空格进行分隔，效果不受前后顺序影响。

3、ID选择器
ID选择器以井号（#）为前缀，后面为ID名称。应用方法：在标签中定义ID属性，然后设置属性值为ID名称。

类选择器和ID选择器可以同时作用于同一个标签，但ID选择器优先于类选择器
通过为类选择器后ID选择器添加标签名前缀，可以增加选择器的权重值，这种形式称为附加选择器，如：article#tangshi、p.red，相对于.red选择器，浏览器会优先解析p.red的样式。

4、包含选择器
包含选择器通过空格链接两个选择器，前面选择器表示包含的祖先元素，后面选择器表示被包含的后代元素。如：

5、子选择器
子选择器使用尖括号（>）连接两个选择器，前面选择器表示要匹配的父元素，后面选择器表示要被包含的匹配子元素。
注意与包含选择器的区别，子选择器比包含选择器匹配的范围更小，从结构层次看，匹配目标更明确。

6、相邻选择器
相邻选择器使用加号（+）连接两个选择器，前面选择器匹配特定元素，后面选择器根据结构关系，指定同级或相邻的匹配元素。

7、兄弟选择器
兄弟选择器使用波浪符号（~）连接两个选择器，，前面选择器匹配特定元素，后面选择器根据结构关系，指定其同级所以匹配的元素。

8、属性选择器
属性选择器是根据标签的属性来匹配元素，使用中括号进行标识：[属性表达式]
CSS3包括以下7种属性选择器：

• E[attr]：根据是否设置特定属性来匹配元素，如：

nav a[id] {background: blue; color: yellow;font-weight: bold;}

• E[attr=“value”]：根据是否设定特定的属性值来匹配元素，如：

nav a[id="first"] {......}

• E[attr~=“value”]：根据属性值是否包含特定的value来匹配元素。注意，属性值是一个词列表，用空格分隔，其中词列表包含了一个value。如：

nav a[title~="website"] {......}
//title="test website"

• E[attr=^“value”]：根据属性值是否包含特定的value来匹配元素。注意，value必须位于属性值的开头。如：

nav a[title^="http://"] {......}

• E[arrt=$=“value”]：根据属性值是否包含特定的value来匹配元素。注意，value必须位于属性值的结尾。如：

nav a[href$="pong"] {......}
//选择href属性中以pong结尾的a元素

• E[arrt*=“value”]：根据属性值是否包含特定的value来匹配元素。注意与 E[attr~=“value”]区分，可以是属性值中特定的字串。如：

nav a[title*="site"] {......}
//选择title属性中包含site字符串的a元素

• E[arrt|=“value”]：根据属性值是否包含特定的value来匹配元素。注意，属性值是value或者是value开头。如：

nav a[lang|="zh"] {......}
//选择lang属性值为zh或以zh-开头的所有a元素