HTML文档元素就是最基本的选择器

如：

 
这一段话是蓝色的。

示例将

元素的字体颜色设置为了蓝色，元素选择器将作用于文档内所有的

元素。同样，我们也能够同时为多个元素应用一种样式，如：

 
标题颜色
 
这一段话是蓝色的。

为多个元素应用样式时，用逗号分隔。

*作为通配选择器，可以与任何元素匹配。

格式：元素|通配符

二、类选择器

类选择器的样式与元素关联，需要为class属性指定一个适当的值，如：

 
第一段。
 
第二段
 
第三段

格式：.类名

代码中有3个

元素，其中有两个指定了class属性，即class="one"，在

第一段。

第二段

第三段

效果：

格式：.类名1.类名2……

多类的概念在于可以对class指定多个属性值，如我们为

指定了class="one two"，那么这个

元素的class属性就包含了两个属性值"one"和"two"，中间空格作为分隔符。在样式表中则使用[.属性值1.属性值2|……]来指向元素。上面的代码中，我们对class值为"one"的元素颜色应用蓝色，class值含有"two"的元素应用红色，为class值同时含有"one"和"two"的元素颜色应用为绿色。如果在样式表中没有为指定.one.two{color:green;}，那么

第一段。

第一段。

四、ID选择器

同类选择器类似，但匹配的是id属性，而不是类选择器的class属性。与类选择器不同的是，在一个HTML文档中，ID选择器会使用一次，而且仅一次，虽然在很多浏览器中指定id属性值能够出现多次，但这是不正确的，而且如果在JavaScript中使用getElementById()方法时，会造成不必要的错误。通过#元素ID属性值来指向元素。如：

 
 
 



第一段。
第二段
第三段

格式：#ID属性值

五、属性选择器

注意：Safari、Opera和所有基于Gecko的浏览器都支持属性选择器，在IE5/Mac和IE6/Win之前，IE并不支持属性选择器。

1.简单属性选择器

　　使用情况：如果希望有某个属性的元素，不在乎属性的值是什么。可以使用简单属性选择器。

 
 
 



第一段。
第二段
第三段

效果：

格式：元素|通配符[属性]

可以看到含有class属性的

元素的颜色变成了蓝色，并且对class的值并不关注。

还可以根据多个属性进行选择，如：a[href][title]{font-weight:bold;} //对同时具有href属性和title属性的元素变成粗体。

2.根据具体属性值选择

上面的例子是不关注属性值的选择器，那么现在我们要讲的就是需要关注属性值的选择器了。我们将上面的例子改变一下：

 
 
 



123
第一段。
第二段
第三段

效果：

格式：元素|通配符[属性=属性值]

我们可以看到p[class="one"]等同于p.one，但是使用属性选择器可以针对其它属性值来选择元素，而不单单是达到类选择器的效果。

3.根据部分属性值选择

如果属性能接受词列表(词之间用空格分隔)，可以根据其中任意一个词进行选择，如：

 
 
 



123

效果：

格式：元素|通配符[属性~=属性部分值]

更高级的css选择器（CSS2）:

[foo^="bar"] 选择foo属性值以"bar"开头的所有元素

[foo$="bar"] 选择foo属性值以"bar"结尾的所有元素

[foo*="bar"] 选择foo属性值中包含字串"bar"的所有元素

4.特定属性选择类型

 
 
 



段落1
段落2
段落3
段落3
段落4

这个规则会匹配lang属性等于en或者以en-开头的所有元素，encn也不会起作用，因为不是en-开头，效果：

格式：元素|通配符[属性|="属性值"

六、后代选择器

h1 em{color:blue;}

可以看作对作为h1后代元素的em元素颜色改为蓝色，用代码展示就是：

123

需要注意的是,这里是后代元素，而不只是子元素，如下面的代码也是有效的：

123

如果只想缩小范围，选择子元素而不是后代元素，则可以使用下面的方式：

h1 > em{color:blue;}

选择相邻兄弟元素，如：

 
 
 



段落1
段落2
段落3
段落3
段落4

效果：

通过h1+p匹配了之前的兄弟元素是

的所有符合要求的

元素，如果

元素之前元素隔着其它元素，则不符合匹配要求，但中间只隔着文本内容并不会影响匹配。

接下来我们要讲的就是更有意思伪类和伪元素了。

伪类

1.链接伪类

：link 指示作为超链接（即有一个href属性）并指向一个未访问地址的所有锚。有些链接会不正确的解释

：visited 指示作为已访问地址超链接的所有锚

例子：

 
 
 



被点击过了了
未被点击

结果：

链接伪类也适用于ID选择器,如：

a#one:link{color:yellow;}

2.动态伪类

:focus 当前拥有输入焦点的元素

:hover 指示鼠标停留元素

:active 指示被用户输入激活的元素

例子：

 
 
 




例子

无操作效果：

文本框获得焦点效果：

鼠标在文字上停留效果：

鼠标在文字上按下左键时效果：

伪元素

1.设置首字母样式

如将

元素中第一个字母变成红色:

p:first-letter{color:red;}

效果：

2.设置第一行的样式

如：

p:first-line{color:red;}

效果：

3.设置之前和之后元素的样式

如：

h2:before{content:"<<";color:blue;}
h2:after{content:">>";color:red;}

效果：

下载本文