CSS选择符类型 1、标签选择符

标签选择符就是省略了<>的HTML标记的名字，例如： H1{color:blue;}

标签选择符是最容易使用的选择符，因为它十分简单，但这种类型的选择符也有很大的局限性，例如，我们想让一部分

标记文字用蓝色显示，而另一部分

标记文字用绿色显示，这样标签选择符是做不到的。这时我们就要使用类或ID选择符。

2、类选择符

类选择符由点号（.）及HTML标记的class属性值两部分组成，在HTML标记中设置相同的class属性值的一组HTML标记将具备相同的显示样式。 例如：

/*定义p1选择符*/ .p1

{ color:Blue;} /*定义p2选择符*/ .p2 {

font-family:隶书; background-color:Gray;

}

3、ID选择符

HTML标记中的id属性值在整个网页中必须是唯一的，所以我们要为每个HTML标记定义不同的id属性值，必须为每个标签定义不同的CSS规则，不能批量地为一系列标记设置相同显示效果的CSS规则。

ID选择符由井号（#）及id属性值两部分组成，例如： #p1{color:blue;}

标记设置id属性值：

id选择符

如果用户知道必须在网页中标记一个唯一的标记时，就可以使用ID选择符，但是，通常用户在编写CSS规则时，大多喜欢使用类选择符，因为使用类选择符可以一次性为多个HTML标记定义相同显示效果的CSS规则。

通过下面例子展示ID选择符的用法，例如： /*定义id1选择符*/ #id1

{ color:Blue;} /*定义id2选择符*/

#id2 {

font-family:楷体; background-color:yellow; }

/*虽然id2与id3具有相同的属性值，但是我们必须分别进行定义，因为在HTML中id属性值必须是唯一的*/

#id3 {

font-family:楷体; background-color:yellow;

}

4、通用选择符

CSS里定义了一个通用选择符，该选择符适用于页面内所有标记和内容，它由星号（*）表示，例如： *{color:blue;}

/*定义通用选择符*/

* {

Font-size:22;

color:red; }

利用通用选择符可以为HTML所有的标记设置样式，但一个精美的网页通常需要各种各样的样式进行修饰，所以比较少用通用选择符。

5、组合选择符 常见的两种： （1）群主选择符

在使用选择符时，有的元素样式是一样的，每次都为不同的选择符单独定义样式的话太繁琐，这时我们便可以使用群主选择符集中定义样式。不同标签或类以逗号隔开。如： div, h2, .error {

font-size:14px; color:red; }

这样我们便同时给div, h2, .error一起定义了样式。

（2）子选择符

在网页里经常会将一个标记嵌入到另一个标记中，这样的两个标签就具备了父子关系了，例如：

CSS样式表

这里

是父标记，是子标记，根据标记的父子关系，在CSS选择符中就存在对应的子选择符，可以将父标记选择符与子标记选择符组合在一起构成子选择符，定义如下： P b{color:blue;}

注意：父标记选择符与子标记选择符之间必须用空格隔开，例如： /*定义

标记中的b子选择符*/ p b { color:blue; }

CSS样式表

6、样式表优先级

当一个HTML标记定义了多种类型的样式规则时，各种样式规则之间存在一定的优先级别，具体排列顺序如下表所示：

样式表规则 带有!important标识的规则 内联样式属性规则 1 2 优先级

ID选择符规则 类选择符规则 标签选择符规则 通用选择符规则

3 4 5 6