css样式的覆盖

最新推荐文章于 2025-04-11 20:41:54 发布

原创最新推荐文章于 2025-04-11 20:41:54 发布 · 7.4k 阅读

CC 4.0 BY-SA版权

总结一下css的样式覆盖；
有时你的html元素会得到多个相互冲突的样式，例如当你创建了一个body元素的background-color css属性为红色，然后再创建一个.text-color{color:black;}设置p元素class为text-color；运行后p元素内容将会是很黑色，这时p元素的class覆盖了body的class属性。
在进一步，如何才能覆盖掉text-color的css样式呢？自然我们会想到再创建一个class属性，我们不妨创建一个名为 blue-text 的 CSS class其颜色设置为蓝色，并务必确保他在text-color样式的下面。以下是代码

<style>
body {
background-color:red;
font-family: Monospace;
color: green;
}
.text-color {
color: black;
}
.blue-text{
    color:blue;
}
</style>
<body>
<p class="text-color  blue-text">Hello world!</p>
</body>

运行后会发现hello world是蓝色的。这也证明了浏览器是从上到下读取css的，这说明，如果发生冲突浏览器将会使用最后的css声明。
除此之外还有没有能覆盖css的方法呢？当然，还有一个id属性；
创建一个orange-text的id属性，应用到p元素内，以下是代码:

<style>
#orange-text{
color:brown;
}
body {
background-color:red;
font-family: Monospace;
color: green;
}
.text-color {
color: black;
}
.blue-text{
    color:blue;
}
</style>
<body>
<p class="text-color  blue-text" id="orange-text">Hello world!</p>
</body>

此时id属性会覆盖掉前面两个css属性，p元素为黄色。注意：你可以将id属性置于两个class属性的上面或者下面，因为id属性始终是具有更高的优先级。
以上我们证明了id声明都会覆盖css声明，不管他在style元素css声明的前面或者后面。此外我们还有其他方法可以覆盖css
即：in-line style(内联样式)；它可以覆盖style元素中所有css声明。
形式为：