CSS学习笔记(十) 样式覆盖规则

有的时候 CSS 真的十分调皮，明明我们给一个元素指定了样式，但是在页面上却没有一点改变

这时我们就要考虑是不是别处指定的样式覆盖了当前指定的样式呢？

所以了解一下样式覆盖规则还是十分有必要的，对于一个元素的某个属性而言，表现出来的样式会遵循以下的规则

（1）内联样式 > 内部样式表 / 外部样式表

    


    
 
        Hello World
    

【最终效果（内联样式 优先）】Hello World

（2）在内部样式表 / 外部样式表中，直接指定的样式 > 继承祖先的样式

    


    

        Hello World 
    

【最终效果（直接指定的样式 优先）】Hello World

（3）对于直接指定的样式，权值大的优先；如果权值相同，后定义的优先【重要】

当直接指定的样式发生冲突时，根据定义该样式的选择器的权值大小进行比较，权值大的优先

选择器的权值计算定义如下：

• id 选择器 >> class 选择器 >> 标签选择器，其中同一类型的选择器权值相同
• 后代选择器的权值等于其包含的各级选择器的权值之和

    


    

        Hello World 
    

【最终效果（权值大的优先）】Hello World

（4）对于继承祖先的样式，最近祖先优先

当继承祖先的样式发生冲突时，根据继承的关系进行比较，最近祖先优先

    


    
 
        
 
            Hello World
        
    

【最终效果（最近祖先优先）】Hello World

（5）!important 声明无视上面的规则，其指定的样式永远不被覆盖【重要】

其实这样的说法或许还有些许不准确，因为（有且仅有） !important 声明可以覆盖 !important 声明

    


    
 
        Hello World
    

【最终效果（!important 声明优先）】Hello World

---

【 阅读更多 CSS 系列文章，请看 CSS学习笔记 】