CSS中的选择器

选择器：浏览器通过选择器为满足条件的HTML元素添加CSS样式
常见的选择器有：id选择器,class选择器,标签选择器，分组选择器，父代选择器，通配符选择器，最后介绍一下伪类。

1 标签选择器

标签选择器：浏览器为HTML文档内标签名与标签选择器名相同的标签元素添加CSS样式，其语法如下：

标签选择器名 {
	declaration1;
	declaration2;
    …
}

以p标签为例设置标签选择器


特别注意：浏览器会为HTML文档内所有p标签元素添加“font-size: 36px;font-weight: bold;”CSS样式。

2 id选择器

id选择器：浏览器为id标签属性的属性值与id选择器名相同的标签元素添加CSS样式，其语法如下（以p标签为例）：

#id选择器名 {		//注意id前边的#号是规范
	declaration1;
	declaration2;
    	…
}

注意：
id标签属性的属性值不能以数字开头；
id标签属性的属性值在HTML文档中必须唯一；

3 类选择器

类选择器：浏览器为class标签属性的属性值与类选择器名相同的标签元素添加CSS样式，其语法如下：

. 类选择器名 {		//注意类选择器名之前的点
	declaration1;
	declaration2;
    …
}

以p标签为例设置类选择器


注意：
1，class标签属性的属性值不能以数字开头；
2，class标签属性的属性值可以有多个，每个值之间用空格间隔；例子如下：

注意空格间隔

总结以上三个选择器的优先级
id选择器优先级最高，标签选择器优先级最低，如下所示：id选择器 > 类选择器 > 标签选择器，如下代码：


对三个span标签分析：第三个span标签有标签选择器，类选择器和id选择器设置样式值，由于id选择器优先级较高，所以样式显示为id选择器的；第二个span标签是标签选择器和类选择器设置样式，类选择器优先级较高，所以样式显示为类选择器的；第一个span标签只有标签选择器设置样式。

4 分组选择器

如果HTML文档多个CSS样式表内的部分样式相同，则可以通过定义一个分组选择器以简
化CSS样式代码， 该选择器的选择器名由多个选择器组成，使用逗号分隔，其语法如下：

选择器1,选择器2,选择器3…{		//这里应该注意，在分组选择器列表中，选择器可以是id选择器，类选择器。以及标签选择器，不是确定的哪一种。
	declaration1;
	declaration2;
    …
}

5 后代选择器

后代选择器（descendant selector）又称为包含选择器，用于为特定的HTML子元素添加CSS样式，语法如下：

父代选择器1 子父代选择器2 子父代选择器3 ….子代选择器 {		//选择器之间用空格间隔；
	declaration1;
	declaration2;
    	…
}

只为ol标签元素内class="font_color"的子元素添加CSS样式
总结：html body 以及ol都是li的父类标签，所以也可以写作如下选择器

html body ol .font_color{
	color:red
}

6 通配符选择器

通配符选择器匹配HTML文档中的任何HTML元素，其语法如下：

*{		//一般情况下：在设置padding和margin时用
	declaration1;
	declaration2;
    	…
}

补充：!important
!important用于提高指定样式规则的应用优先权，如下代码：


由于给span标签选择器设置了!important，所以span标签选择器优先级最高，给所有的span标签都设置一样的font-size:36px的属性

7 伪类

CSS 伪类用于向某些选择器添加特殊的效果，语法结构如下：


注意
若:link、:visited、:hover和:active一起使用，:hover 必须被置于 :link 和 :visited 之后，:active 必须被置于 :hover 之后，即:link -> :visited -> :hover -> :active ，简记love hate（爱恨） 。