有一个属性color：red，那么这个属性就会是
继承，即
还有属性颜色：红色。
从上面可以看出，当网页复杂且HTML结构嵌套较深时，某个标签的样式会受到其祖先标签样式的影响。
受影响的规则是：
CSS 优先规则 1：最近的祖先样式优先于其他祖先样式。
示例1：
如果我们将标签从其祖先继承但自身没有的属性称为“祖先样式”css样式的优先级，那么“直接样式”就是标签直接拥有的属性。 还有以下规则：
CSS优先规则2：“直接样式”比“祖先样式”具有更高的优先级。
示例2：
选择器优先级
之前，我们讨论了标签从其祖先继承的属性，现在我们讨论标签本身的属性。 在讨论 CSS 优先级之前，我们先来谈谈 CSS7 基本选择器：
ID选择器，例如#id{}
类选择器，例如 .class{}
属性选择器，如 [href="segmentfault.com"]{}
伪类选择器，如：hover{}
伪元素选择器，例如 ::before{}
标签选择器，例如 span{}
通配符选择器，例如 *{}
CSS优先规则3：优先关系：内联样式>ID选择器>类选择器=属性选择器=伪类选择器>标签选择器=伪元素选择器
示例3：
//HTML
//CSS
#内容 ID{
红色;
.内容类{
颜色: 蓝色;
div{
颜色: 灰色;
最终颜色为黑色，因为内联样式比其他选择器具有更高的优先级。
所有CSS选择器都是由上述七个基本选择器或组合组成css样式的优先级，组合有以下三种：
后代选择器：.father.child{}
子选择器：.father>.child{}
相邻选择器：.bro1+.bro2{}
当一个标签同时被多个选择器选择时，我们需要确定这些选择器的优先级。 我们有以下规则：
CSS优先规则4：估计选择器(a)中ID选择器的数量，估计选择器(b)中类选择器、属性选择器和伪类选择器的数量总和，估计选择器(b)中标签选择器的数量选择器 选择器和伪元素选择器的数量之和 (c)。 按照a、b、c的顺序比较大小，较大的优先级较高，相等则比较下一个。 如果最后两个选择器中的a、b、c都相等，则按照“就近原则”进行判断。
示例4：
//HTML
//CSS
#con-idspan{
红色;
div.con-span{
颜色: 蓝色;
从规则4可以看出， 的颜色是红色。
如果外部样式表和内部样式表中的样式冲突，会发生什么情况？ 这与样式表在 HTML 文件中的位置有关。 应用的样式越低，优先级越高，尽管这总是可以用规则 4 来解释。
实施例5：
//HTML
//样式链接.css
div {
背景：石灰；
//样式导入.css
div {
背景：灰色；
从顺序上看，内部样式排在最后，引用的是最新的，所以
背景颜色为蓝色。
里面的代码中，@import语句必须出现在内部样式之前，否则文件导入无效。 事实上，不建议使用@import的形式来引用外部样式文件。 原因参见另一篇博客：CSS导入表单。
CSS还提供了一种完全忽略上述规则的方法。 您可以在必要时使用此技术，必须确保显示特定属性。
CSS 优先级规则 5：在属性后插入 !important 的属性具有最高优先级。 如果同时插入!important，则优先级由规则3和4决定。
//HTML
//CSS
p {
背景：红色！重要；
。父子{
背景：蓝色；
虽然.father.son残差较高，但是选择器p中的background属性是用!important插入的，所以
背景是红色的。
发表评论