今天给大家分享一下，css有哪些选择器，优先级如何计算？

（1）背景介绍：

什么是CSS选择器

就是指定CSS要作用的标签，那个标签的名称就是选择器。

意为：选择哪个容器

CSS的选择器分为两大类：基本选择题和扩展选择器。

基本选择器：

标签选择器：针对一类标签

ID选择器：针对某一个特定的标签使用用ID和#来表示

类选择器：针对你想要的所有标签使用用class

通配符*：匹配任何标签

高级选择器：(扩展选择器)

后代选择器：用空格隔开

交集选择器：用.隔开

并集选择器（分组选择器）：用逗号隔开

伪类选择器

儿子选择器，用符号>表示

序选择器

下一个兄弟选择器

结构伪类选择器

优先级权重的概念

权重，是一个相对的概念，是针对某一指标而言。

某一指标的权重是指该指标在整体评价中的相对重要程度。

权重系数，是表示某一指标项在指标项系统中的重要程度

它表示在其它指标项不变的情况下

这一指标项的变化对结果的影响。

css权重的理解：

每一个css的选择器都有一个相对的重要程度值，

也就是权重的值，简称“权值”；

css通过css选择器的权重占比，来计算css选择规则的总权值

从而确定 定义样式规则的 优先级次序；

3.css优先级规则：

css选择规则的权值不同时，权值高的优先；

css选择规则的权值相同时，后定义的规则优先；

从而确定 定义样式规则的 优先级次序；

（2）知识剖析：

后代选择器

1有什么作用

1、后代选择器: 定义的时候用空格隔开

对于E F这种格式，表示所有属于E元素后代的F元素

有这个样式。空格就表示后代。

后代选择器，就是一种平衡：共性、特性的平衡。当要把某一个部分的所有的什么，

进行样式改变，就要想到后代选择器。

后代选择器，描述的是祖先结构。

空格就表示后代。.div1 p 表示.div1的后代所有的p。

交集选择器

交集选择器没有空格。所以，没有空格的div.red（交集选择器）和有空格的div .red（后代选择器）不是一个意思。

并集选择器（分组选择器）：用逗号隔开

三种基本选择器都可以放进来。

伪类选择器

hover：鼠标放到某个标签上的时候出现的效果

儿子选择器，用符号>表示

div的儿子p。和div的后代p的截然不同。

序选择器

div的儿子p。和div的后代p的截然不同。

下一个兄弟选择器

div的儿子p。和div的后代p的截然不同。

结构伪类选择器

伪类选择器的标志性符号是 :

先根据选择器找到选中的全部位置，

如果发现某个位置不是类型E，则该位置失效。

权值的计算：

权值等级划分， 一般来说是划分4个等级：

第一等级：代表 内联样式，如 style=""，权值为 1,0,0,0；

第二等级：代表 ID选择器，如 #id="", 权值为 0,1,0,0；

第三等级：代表 calss | 伪类 | 属性 选择器，如 .class | :hover,:link,:target | [type], 权值 0,0,1,0；

第四等级：代表 标签 | 伪元素 选择器，如 p | ::after, ::before, ::fist-inline, ::selection, 权值 0,0,0,1；

（3）常见问题：

如何让这个第四等级的选择器，来变成最优先选择的呢？

（4）解决方案：

css属性后面加 !important 时，无条件绝对优先

（5）编码实战：

h1{

color: black !important;

}

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

程序员编程交流QQ群：805358732