简述5大CSS选择器

每一条CSS样式定义由两部分组成，形式如下：[code] 选择器{样式} [/code] 在{}之前的部分就是“选择器”。“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。本文我们一起来看看常用的5大CSS选择器。

1、类别选择器

类选择器根据类名来选择

前面以”.”来标志，如：

.demoDiv{

color:#FF0000;

}

在HTML中，元素可以定义一个class的属性。

如：

<div class="demoDiv">

这个区域字体颜色为红色

</div>

同时，我们可以再定义一个元素：

<p class="demoDiv">

这个段落字体颜色为红色

</p>

最后，用浏览器浏览，我们可以发现所有class为demoDiv的元素都应用了这个样式。包括了页面中的div元素和p元素。

上例我们给两个元素都定义了class，但如果有很多个元素都会应用这个元素，那得一个个的定义元素，就会造成页面重复的代码太多，这种现象称为“多类症”。

我们可以改成这样来定义。

<div class="demoDiv">

<div>

这个区域字体颜色为红色

</div>

同时，我们可以再定义一个元素：

<p>

这个段落字体颜色为红色

</p>

</div>

这样，我们就只是定义了一个类，同时把样式应用到了所有的元素当中。

2、元素选择器

最常见的css选择器当属元素选择器了，在HTML文档中该选择器通常是指某种HTML元素，例如：p,h2,span,a,div乃至html。

用法十分简单，例如：

以下css代码会对整个文档添加黑色背景；将所有p元素字体大小设置为30像素同时添加灰色背景；对文档中所有h2元素添加红色背景。

1 html {background-color: black;}

2 p {font-size: 30px; backgroud-color: gray;}

3 h2 {background-color: red;}

此外，我们也可以同时对多个html元素进行声明。例如：

以下css代码会对文档中所有的h1~h6以及p元素字体设置为”黑体”。

1 h1, h2, h3, h4, h5, h6, p {font-family: 黑体;}

通过上面的例子也可以看出css的基本规则结构：由选择器和声明块组成，每个声明块中包含一个或多个声明。其语法格式为：选择器{属性名:属性值;}

3、ID选择器

ID选择器和类选择器有些类似，但是差别又十分显著。

首先一个元素不能像类属性一样拥有多个类，一个元素只能拥有一个唯一的ID属性。其次一个ID值在一个HTML文档中只能出现一次，也就是一个ID只能唯一标识一个元素(不是一类元素，而是一个元素)。

类似类属性，在使用ID选择器前首先要在元素中添加ID属性，例如：

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

2 2 <p id="foot-para">...</p>

使用ID选择器的方法为井号”#”后面跟id值。现在我们使用id选择器选择以上2个p元素如下：

1 #top-para {}

2 #foot-para {}

这样我们就可以对以上2个段落进行需要的操作了。正因为ID选择器的唯一性，也使其用法变得相对简单。

4、属性选择器

您可以用判断html标签的某个属性是否存在的方法来定义css

属性选择器，是根据元素的属性来匹配的，其属性可以是标准属性也可以是自定义属性；!ie6，0 0 1 0

　　当然，也可以同时匹配多个属性；

[attr]

[title] {margin-left: 10px}

//选择具有 title 属性的所有元素；

[attr=val]

[title = 'this'] {margin-right: 10px}

//选择属性 title 的值等于 this 的所有元素

[attr^=val]

[title ^= 'this'] {margin-left: 15px}

//选择属性title的值以this开头的所有元素

[attr$=val]

[title $= 'this'] {margin-right: 15px}

//选择属性title的值以this结尾的所有元素

[attr*=val]

[title *= 'this'] {margin: 10px}

//选择属性title 的值包含 this 的所有元素

[attr~=val]

[title ~= 'this'] {margin-top: 10px}

//选择属性 title 的值包含一个以空格分隔的词为 this 的所有元素，即 title 的值里必须要有 this 这个单词并且this要与其他单词之间有空格分隔

[attr|=val]

[title |= 'this'] {margin-bottom: 10px}

//选择属性 title 的值等于this，或值以 this- 开头的所有元素

5、派生选择器

派生选择器，乍一看名字不知所云，它又名上下文选择器，它是使用文档DOM结构来进行css选择的。DOM结构在此不再赘述了

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

1 body li { ...}

这里会选择所有的li后代，也就是body下的所有li，不论他们之间相隔的代数有多少。

同理，如果想要选择h1元素下的span，可以使用以下代码：

1 h1 span { ...}

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

1 .warning li { ...}

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

1 div.warning li { ...}

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

当然，除了上述的5大CSS选择器，还有很多我们不怎么熟悉的CSS选择器，它们都有各自的特色和功能，共同实现CSS对HTML页面中元素的控制。想了解这些CSS选择器的更多信息，请观看本站的HTML教程。