5.2 CSS选择器

CSS选择器是指CSS选择要修饰的元素，对指定元素进行修饰美化。简单的选择器可以对给定类型的所有元素进行格式化，复杂一些的选择器可以根据元素的上下文、状态等来应用样式。

5.2.1 通用选择器

写法：*{}。

作用：选中页面中的所有标签，一般用于定义最通用的属性，设置默认值。

优先级：最低，低于所有选择器。

代码示例如下：

5.2.2 标签选择器

写法：HTML标签名{样式属性：样式属性值；……}。

作用：选中页面中所有的对应标签，当需要对某类标签进行统一设置样式时采用。

优先级：高于通用选择器。

代码示例如下：

代码含义：选择所有＜div＞标签，并给标签设置宽度、高度、背景色等样式属性，当页面包含有多个＜div＞标签时，都会被选中。

5.2.3 类选择器

写法：.类名称{}。

调用：在需要改变样式的标签上，使用class="选择器名称"调用对应选择器。

作用：修改所有调用选择器的标签。

优先级：高于标签选择器。

代码示例如下：

代码含义：选择类名称为first的标签，并给标签设置宽度、字体颜色等样式属性。

注意事项如下：

1）类名称是可以随意取名的，但通用做法是只能包含字母、数字、下画线，并且不以数字开头，否则可能会产生样式不能应用的问题。

2）类名称应该能表示一定意义，不能起毫无意义的名字，如a。

3）当页面需要对多个元素应用相同样式，则采用类选择器。

4）类选择器可以应用不同标签。

5.2.4 id选择器

写法：#id名称{}。

作用：在需要改变样式的标签上，使用id="选择器名称"调用对应选择器。

优先级：大于类选择器。

代码示例如下：

代码含义：选择id为list标签，并给标签设置宽度、高度、背景色等样式属性。

注意事项如下：

1）id是唯一的，同一页面不能出现多个相同的id定义。

2）id名称要求与类选择器相同。

3）通常当页面中有唯一样式时，采用id选择器。

5.2.5 后代选择器与子代选择器

1. 后代选择器

写法：选择器1选择器2选择器3……{}，每个选择器之间用空格分隔。

代码示例如下：

div.li{}表示选中的元素包括div里面的class="li"的元素，其中class="li"的元素可以是div的子代，也可以是div的后代，也就是孙代及往后。

2. 子代选择器

写法：选择器1＞选择器2＞选择器3……{}，每个选择器之间用大于号分隔。

代码示例如下：

div＞ul{}表示ul必须是div的直接子代，孙代以后不选中。

5.2.6 交集选择器与并集选择器

1. 交集选择器

写法：选择器1选择器2……{}，选择器之间没有分隔符。

代码示例如下：

.list#li{}元素必须同时具备class="list"并且id="li"样式才能生效。

2. 并集选择器

写法：选择器1，选择器2，……{}，选择器之间用逗号分隔。

代码示例如下：

.li，#li{}元素只要具备class="li"或者id="li"，样式即可生效。

5.2.7 伪类选择器

写法：选择器名称：伪类状态{}。

代码示例如下：

常见的伪类状态如下：

link：未访问状态。

visited：已访问状态。

hover：鼠标指向时，即悬停在元素上方时。

active：激活选定状态（鼠标点下去没松开）。

focus：获得焦点时（input常用）。

超链接多种伪类共存时的顺序如下：link→visited→hover→active。

5.2.8 选择器的命名规则及优先级

1. 选择器的命名规则

1）只能由字母、数字、下画线组成，不能有其他任何特殊字符。

2）开头不能是数字，即只能以字母、下画线开头。

2. 选择器的优先级

1）第一原则“近者优先”，最内层选择器永远比外层优先。例如：div ul li＞div#ul，li在ul内层，所以li标签选择器能覆盖外层id选择器。

2）当作用在同一层时，可以根据选择器优先级权重进行计算。

标签选择器优先级为1，class选择器优先级为10，id选择器优先级为100。例如：div#li＞div ul.li＞div ul li，优先级权重依次为：1+100＞1+1+10＞1+1+1。

3）当优先级权重完全相同时，写在后面的选择器会覆盖前面的选择器。例如：

div li{color：red；}

div li{color：blue；}/*完全相同的选择器，写在后面的生效*/

4）除以上原则外，CSS中还有一个特殊样式规则！important。

！important的作用是将当前CSS语句提升到最高权重，即可以覆盖任何选择器的CSS语句。但是并不推荐使用！important，因为它会使你的页面难以修改调试。例如：