css样式的覆盖

总结一下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声明。
形式为:

<p style="color:white;">hello world</p>

最后,还有最后一个方法来覆盖css样式,这是所有的最强大的方法,即:!important。当你绝对需要确定一个元素具有特定的CSS时,可以使用 !important

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值