什么是CSS选择器？

要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。HTML页面中的元素就是通过CSS选择器进行控制的。

二、知识剖析

CSS选择器可分为以下几种。

1、类别选择器

类别选择器根据类名来选择，前面以“.”来标志。

在HTML中，元素可以定义一个class的属性，并且多个元素都可以重复应用这个属性。

2、标签选择器

一个完整的HTML页面是有很多不同的标签组成，如：body，div，p，ul，li，而标签选择器，则是 决定哪些标签采用相应的css样式。

3、ID选择器

ID选择器可以为标有特定ID的HTML元素制定特定的样式。根据元素ID来选择元素，具有唯一性，这意味着同一ID在同一文档页面中只能出现一次。例如，你将一个元素的id取值为“name”，那么在同一页面你就不能再将其他元素id取名为“name”了。

前面以“#”号来标志，在样式里面可以这样定义：

4、通用选择器

用过“*”号来表示。如下代码表示所有元素的内外边距都为0，所有的字体都为微软雅黑。他可以清除不同浏览器的默认样式。

同时通用选择器还可以和后代选择器组合。如下表示所有p元素后代的所有元素都应用这个样式。

注意：但是如果你在p标签里嵌套了一个p标签，就会出现浏览器不能解析的情况，因此要避免这种情况发生。

5、后代选择器

后代选择器也称为包含选择汽车，用来选择特定元素或元素组的后代，将对父元素的选择放在前面，对子元素的选择放在后面，中间加一个空格分开。后代选择器中的元素不仅仅只能有两个，对于多层子线后代关系，可以有多个空格加以分开。

如下例子定义了所有class属性为father的元素下面的class属性为child的颜色为红色。

6、子选择器

请注意这个选择器与后代选择器的区别，子选择器只是选择元素的直接后代，即仅仅作用于第一个后代。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。

7、伪类选择器

即链接样式。a元素的伪类，存在4中不同的状态：link、visited、active、hover。如

8、群组选择器

具有相同样式的标签分组显示，将具有多个相同属性的元素，合并群组进行选择，定义同样的css属性，这大大的提高了编码效率，同时也减少了css文件的体积。

9、相邻同胞选择器

如一个标题h1元素后面紧跟了两个段落p元素，我们想定位第一个段落p元素，对它应用样式，就可以使用相邻同胞选择器。两个元素之间用“+”进行连接。如

三、常见问题

问题一：对多个选择器使用的优先级是怎么进行计算的？

问题二：当不同类别的多个选择器混合使用个怎么计算优先级？

四、解决方案

问题一：对多个选择器使用的优先级是怎么进行计算的？

对于不同类别的选择器，以以下原则进行排序：

1、在属性后面使用！important会覆盖页面内任何位置定义的元素样式。

2、作为style属性写在元素内的样式

3、id选择器

4、类选择器

5、标签选择器

6、通配符选择器

7、浏览器自定义或子元素集成父类的样式

将上面的稍微总结一下就是：

！important>行内样式>ID选择器>类选择器>标签>通配符>继承>浏览器默认属性

同一级别中后写的会覆盖先写的样式。

问题二：当不同类别的多个选择器混合使用个怎么计算优先级？

有一个简单的算法，设

a.内联样式表的权值为1000

b.ID选择器的权值为100

c.class类选择器的权值为10

d.HTML标签选择器的权值为1

我们可以把选择器中规则对应多加法，比较权值，如果权值相同那就后面的覆盖前面的。如图，div.test1.test3的权值是1+10+10=21，而.test1.test2.test3的权值是10+10+10=30，所以div会应用.test1.test2.test3变成绿色。