CSS样式没显示为什么?往这看!

本文深入解析CSS选择器的权重机制,包括内联样式、ID选择器、类选择器及标签选择器的权重层级,并探讨!important声明如何打破常规权重规则。

                                     CSS选择器权重问题

我们在写CSS样式的时候有可能出现这样的问题就是说写完样式后样式却没有发生改变,如果代码没有问题那么就可能是我们的权重产生问题了。

我们这里来说一下css选择器权重的大小

1、看下面两图,图一我通过大部分常用的选择器设置的div的样式,而通过图二的显示可以看出来它选择了内联样式的一个样式显示可以得出在图一中内联的权重最大

2、然后把内联样式去除可以看出浏览器显示了ID选择器的样式,由此可以看出ID选择器的权重在我举例中次于内联选择器

3、再接着往下把ID选择器注释掉浏览器显示的类选择器的样式,由此得出在此次举例中类的权重再第三

4、再接着往下就不用说了把类选择器注释掉浏览器显示的是标签选择器的样式,由此得出在此次举例中标签权重最小。

其实在css内部已经定义好了样式的权重值,

标签:+1      类:+10        ID+100      内联样式:+1000

如果你设置的两种样式那么权重大的就会把小的给覆盖掉,还有权重是可以相加的所以如果发现权重不够是可以加权重的。

但这里有一个特殊情况 important  通过下图可以看到我在标签选择器的样式后加了!important 理应它的样式会被后面的ID样式覆盖但它没有原因正是!important的影响,它会强制设置样式,这种方式不到万不得以不推荐使用因为你以后更改样式的就有些困难。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值