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

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

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

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

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

<!DOCTYPE HTML>
<html>
<head>
    <style>
        #title { color: red; } /* 内部样式表 */
    </style>
</head>
<body>
    <div style="color: green;" id="title"> <!-- 内联样式 -->
        Hello World
    </div>
</body>
</html>

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

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

<!DOCTYPE HTML>
<html>
<head>
    <style>
        #title { color: red; }
        span { color: green; } /* 直接指定 span 标签样式 */
    </style>
</head>
<body>
    <div id="title">
        <span>Hello World</span> <!-- span 标签也会继承 div 标签的样式 -->
    </div>
</body>
</html>

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

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

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

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

id 选择器 >> class 选择器 >> 标签选择器，其中同一类型的选择器权值相同

后代选择器的权值等于其包含的各级选择器的权值之和

<!DOCTYPE HTML>
<html>
<head>
    <style>
        #title span { color: red; } /* 后代选择器 = id 选择器（#title） + 标签选择器（span） */
        #intro { color: green; } /* id 选择器（#intro） */
    </style>
</head>
<body>
    <div id="title">
        <span id="intro">Hello World</span> <!-- id 选择器 + 标签选择器 > id 选择器 -->
    </div>
</body>
</html>

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

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

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

<!DOCTYPE HTML>
<html>
<head>
    <style>
        #title { color: red; }
        #intro { color: green; }
    </style>
</head>
<body>
    <div id="title"> <!-- 对于下面的 span 标签来说，在继承树上距离较远 -->
        <div id="intro"> <!-- 对于下面的 span 标签来说，在继承树上距离较近 -->
            <span>Hello World</span>
        </div>
    </div>
</body>
</html>

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

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

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

<!DOCTYPE HTML>
<html>
<head>
    <style>
        #title { color: red!important; } /* 加上 !important 声明的内部样式表 */
    </style>
</head>
<body>
    <div style="color: green;" id="title"> <!-- 内联样式 -->
        Hello World
    </div>
</body>
</html>

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

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

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

猜你喜欢