CSS中的五大选择器

1、元素选择器

最常见的css选择器当属元素选择器了，在HTML文档中该选择器通常是指某种

HTML元素，例如：p/h2/span/a,div乃至htmL

例如：

html{backgrouiad-color：black;}

p行odize：backgroud-color：gray;}

k2{background-colorred;}

以上css代码会对整个文档添加黑色背景；将所有p元素字体大小设置为30像

素同时添加灰色背景；对文档中所有h2元素添加红色背景。

通过上面的例子也可以看出css的基本规则结构：由选择器和声明块组成。每个

声明块中包含一个或多个声明。每个声明的格式为：属性名：属性值。

每条声明以分号";"结尾。如果在一个声明中使用了不正确的属性值，或者不正确

的属性，则该条声明会被忽略掉。另外请注意不要忘记每条声明后面的分号。

我们也可以同时对多个html元素进行声明：

hl,p-family:黑体;}

这样会将文档中所有的hl-h6以及p元素字体设置为"黑体"。如果我们希望一锅

粥地选取所有的元素，可以使用通配符"*":*{fo^t-size：2.Opx;}

这样所有的元素都将被选中，虽然font-size属性对于某些元素是无效的，那么它

将被忽略。

2、类选择器

(1)单类选择器

单纯的元素选择器似乎还过于粗糙了，比如我们希望在文档中突出加粗显示某种

重要的内容，例如稿件的截至日期。问题在于我们不能确定稿件的截至日期将会

出现在哪种元素中，或者它可能出现在多种不同的元素中。这个时候，我们可以

考虑使用类选择器

(classselector)o

要使用类选择器我们需要首先对文件元素添加一个class属性，比如截至日期可

能会出现在以下元素中：

<pc/nss="de〃山

这样我们就可以用以下方式使用类选择器了：

p.deadline{color：red;}

h2.deadliM{colorred;}

点号加上类名就组成了一个类选择器。以上2个选择器会选择所有包

含"deadline"类的p元素和h2元素。而其余包含该属性的元素则不会被选中。

如果我们省略.deadline前面的元素名，那么所有包含该类的元素都将被选中：

.deadline(color：red;}

通常情况下，我们会组合使用以上2者得到更加有趣的样式：

.deadliM{colorred;}

spa^.deadliM{fo^t-style:italic;}

以上代码首先会对所有的包含deadline的元素字体设置为红色，同时会对span

元素中的文本添加额外的斜体效果。这样，如果你希望某处文本拥有额外的斜体

效果将它们放在<span></span>中就可以了。

(2)多类选择器

在实践的做法中，元素的calss属性可能不止包含一个单词，而是一串单词，各

个单词之间用空格隔开。

比如某些元素包含一个"warning"类，某些元素包含一个"important”类，某些元素

同时包含"warningimportant"类。属性名出现的顺序没有关系：

class-important"

class="ii^portai^twanting”

以上2者是等价的。我们希望包含warning类的元素有一个醒目的红色字体，包

含important属性的元素有一个加粗的字体显示，而同时包含以上2中属性的元

素另外拥有一个蓝色背景(不管还能不能看清文字了)，我们可以使用以下的css

代码：

w八刖{color.red;}

.important{font-weight:bold;}

{background：blue;}

当然，第三条你也可以写成：.important.warning{background:blue;}和词序没

有关系。说明一下，.warning会匹配所有包含warning属性的元素，不管该元素

还包含多少其他的属性。.important同理。而.important.warning会匹配所有同时

包含以上2种属性的元素，不管该元素还包含多少其他的类，也不管他们在类列

表中出现的顺序，只要其中含有这2个属性，则会被选择进来！

同样地，多于多类选择器，在前面加上元素名，则会匹配包含指定类名的指定元

素，例如：p.warning.important{}

将会匹配同时包含warning和important属性的p元素，其他同样包含以上2类

的元素则不会被选中。

3、ID选择器

ID选择器和类选择器有些类似，但是差别又十分显著。首先一个元素不能像类

属性一样拥有多个类，一个元素只能拥有一个唯一的ID属性。其次一个ID值在

一个HTML文档中只能出现一次，也就是一个ID只能唯一标识一个元素(不是一

类元素，而是一个元素)。类似类属性，在使用ID选择器前首先要在元素中添加

ID属性，例如：

卬id="top-para">...</p>

<pid.="foot-paran>...</p>

使用ID选择器的方法为井号"#"后面跟id值。现在我们使用id选择器选择以上2

个P元素如：

^top-paraQfoot-para()；

这样我们就可以对以上2个段落进行需要的操作了。正因为ID选择器的唯一性，

也使其用法变得相对简单。

4、属性选择器

属性选择器在css2中引入，使我们可以根据元素的属性及属性值来选择元素。

下面分别来说明：

(1)简单属性选择器

简单的属性选择器可以使我们根据一个元素是否包含某个属性来做出选择。使用

方法引：元素名【属性名]或“属性名]。比如我们希望选择带有alt属性的所有

img元素:img[alt]{...}

选择带有title属性的所有元素：*[title]{...}o同类选择器类似，我们也可以根据

多个属性信息进行选择，例如同时拥有href和title的a元素：

组合使用类选择器使我们的选择更加富于灵活性。

(2)具体属性值选择器

如果我们希望更加精确地根据属性值来选择元素，我们可以在简单的属性选择器

中指定属性的值。最简单的我们希望找到href属性值为的

锚元素：

a[href=,'http://www.baidu.co^"]{font-weight：bold;}

要特别注意的是，这里的具体值匹配实质上是一个字符串匹配，所以在这里对于

class属性而言，词条的顺序是有关系的。

将不会匹配到<pclass="importantwarning"x/p>,也不会匹配到<pclass="warning

importantmini-type">,这里就是一个生硬的字符串匹配。

另外，想要同时匹配多个属性的值也是可以的：

将匹配到类为warning(仅有warning),title属性为para的p元素。

(3)部分属性值选择器

根据属性值来匹配元素无疑比简单的属性匹配更加精细化了，但是似乎有些精细

化过头了，字符串的完全匹配显得过于生硬。比如我们希望选择在一串属性值中

出现了某个关键字的元素，不妨再次以class属性为例，我们希望选择所有包含

了warning类的p元素，属性值匹配将无法做到，好在还是有办法的，我们可以

使用以下的部分值匹配选择器：

该选择器在等号"="前面添加了一个波浪号含义为包含后面的字串的匹配。以

上代码将会选择所有class属性中包含"warning"的p元素。为了更加清楚地说明

问题，它和以下的选择器是等价的：

p.warning{

当然~=不仅仅只是用在class属性上，这只是一个示例。

再比如说，我们的文档中包含一系列人物介绍的div元素:

H

〈divtitle=iiatro

〈divtitle："int%o

<divtitle-'iiatro3〃>..</d2>

我们可以使用以下的方式选择所有人物简介div：div[title~="intro"]{...}

不过遗憾的是<divtitle="animalintro">也将会被选择进来，这是需要我们特别注

意的地方。

关于部分值选择器也有其局限性，它匹配的是由空格分隔的单词，如果我们将上

面的div写成下面的样子就会匹配失败：

<divtitle-11intiro

<div

<div

对于这种情况，我们可以使用子串匹配属性选择器。规则如下：

I//title以mtro开头的div元素

I//title以intro结尾的div元素

Id.iv[title^="ii^tro"]{...}//title中包含"邮r。"子串的div元素

举例来说：

a[href*="google."]{...}

将包含所有链接中包含"google."的a元素。

div[title$="y"]{...}

将包含以下所有div元素:

<divtitle="cloudy">...</div>

<divtitle="snowy">...</div>

<divtitle="rainy">...</div>

可以看出部分值属性选择器的功能是十分强大的。

5、派生选择器

派生选择器，乍一看名字不知所云，它又名上下文选择器，它是使用文档DOM

结构来进行css选择的。DOM结构在此不再赘述了，但为了更加清楚地说明问题,

我们这里给出一个DOM树作为参考：

(1)后代选择器(descendantselector)

如上图，如果想要选择body元素的所有li子元素，方法如下：

bodyli{...}

这里会选择所有的li后代，也就是图中的body下的所有li,不论他们之间相隔

的代数有多少。同理，如果想要选择hl元素下的span,可以使用以下代码：

h工span.{…}

如果我们要选择拥有warning类的元素的li后代，可以使用下面的方法：

.waningli{...}

当然，如果希望只选择拥有warning类的div元素的li后代，可以写作：

div.wariaiiag〃{...)

由上面的例子不难看出，后代选择器的规则就是用空格连接2个或多个选择器。

空格的含义为：…的后代。多个选择器的情况如下：ullili{...}

这样，就会选择所有ul下包含在li元素下的所有li元素了，听起来十分拗口，

参考我们的DOM树，会选择到文档树种最后一排li元素。

(2)子元素选择器(chiIdselector)

子元素选择器和后代选择器不同，它只能选择某元素的直接后代，不能跨代选取,

用法如下：ul>li{...}

两个子元素中间用一个大于号〉连接。上面的代码会选择到所有ul元素的直接li

子元素。对应到DOM树中，所有的li元素都会被选中，原因是图中所有的li元

素都是ul的子元素。

但是，以下代码将不会选中任何元素:

kl>spaia{...}

由于span是hl的"孙子元素”，hl没有直接的span子元素，因而上面的代码将

不会选到任何结果。其他方面和后代元素类似，需要特别注意的就是子元素选择

器不能隔代选取。

(3)相邻兄弟选择器(Adjacentsiblingselector)

相邻兄弟选择器，故名思意将会选取某个元素的相邻兄弟元素，注意它选取的是

相邻的兄弟元素而不是所有的兄弟元素，实际上选取的是紧跟在后面的兄弟