css连续选取几个li_详解:5种CSS选择器的结合使用

1、元素选择器

2、类选择器

3、ID选择器

4、属性选择器

5、派生选择器

1、元素选择器

最常见的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的基本规则结构：由选择器和声明块组成，每个声明块中包含一个或多个声明。其语法格式为：选择器{属性名:属性值;}

2、ID选择器

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

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

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

1 1

...

2 2

...

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

1 #top-para {}

2 #foot-para {}

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

3、类选择器

(1)单类选择器

单纯的元素选择器似乎还过于粗糙了，比如我们希望在文档中突出加粗显示某种重要的内容，例如稿件的截至日期。问题在于我们不能确定稿件的截至日期将会出现在哪种元素中，或者它可能出现在多种不同的元素中。这个时候，我们可以考虑使用类选择器(class selector)。

要使用类选择器我们需要首先对文件元素添加一个class属性，比如截至日期可能会出现在以下元素中:

1

...

2

...

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