CSS权重关联及难题分析

日期:2021-01-20 类型:科技新闻 

关键词:秀米制作h5,h5如何制作,h5小游戏制作,h5游戏开发,免费的h5制作网站


id 的挑选器为何要这么写 li#first?

1. 1个疑惑?
看到过1篇有关 CSS 的文章内容,在其中说到:针对相近 li#first 这样的挑选器,因为应用 id 就早已能够明确元素了,沒有必要再写上前面的 li, 立即写上 #first 这样的 id 挑选器便可以了。听起来讲得非常好,简易检测1下也沒有难题。

但是,大家常常看到带有元素名字的挑选器,比如,在微软的新项目模版中就有很多的带有元素名字的挑选器,假如沒有用的话,为何要这样写呢?

拷贝编码
编码以下:

ul#navlist
{
float: right;
}

ul#navlist li
{
display: inline;
}

2. 难题出現了!
写1个简易的菜单,应用 ul 和 li 完成,菜单项之间应用边框来完成间距线。

html 编码以下:

拷贝编码
编码以下:

<ul id="navlist">
<li class="first"><a href="/" id="current">Home</a></li>
<li><a href="#">Store</a></li>
<li><a href="#">ShoppingCart</a></li>
<li><a href="#">Admin</a></li>
</ul>

应用下面的款式表,最先根据为全部的非常连接提升1个左侧框来画出间距的虚线,随后将第1个菜单项的左侧框去掉,我的第1个款式应用了 .first a。

拷贝编码
编码以下:

ul#navlist li
{
display: inline;
}
ul#navlist li a
{
border-left: 1px dotted #8A8575;
padding: 10px;
margin-top: 10px;
color: #8A8575;
text-decoration: none;
float: left;
}
.first a
{
border: none;
}

 看1下实际效果,彻底沒有反映。

也有的地区说 id 挑选器的级別较为高,那末将类改为 id 。

拷贝编码
编码以下:

<li id="first"><a href="/" id="current">Home</a></li>

将款式表也开展相应的改动。

拷贝编码
编码以下:

#first a
{
border: none;
}

但是結果呢?屹立不倒!

用火狐的 firebug 看1看,被忽视了。

3. 探源

为何我的款式被秒杀了?

在网上有很多的文章内容,可是说法其实不1致,有的说要考虑到3个级別,但是也是有的说必须考虑到4个级別,可是总的方位大概是有关堆叠的。

比不上到 W3C 的网站上看1个到底。有关的规范在 这个网页页面 能够看到,现阶段为止的 CSS 规范有3个: CSS1, CSS2, 和 CSS3。

CSS1 是最开始的规范,在其中有关堆叠次序的叙述在 这里,还出示了1个简易的示例开展表明。

拷贝编码
编码以下:

LI {...} /* a=0 b=0 c=1 -> specificity = 1 */
UL LI {...} /* a=0 b=0 c=2 -> specificity = 2 */
UL OL LI {...} /* a=0 b=0 c=3 -> specificity = 3 */
LI.red {...} /* a=0 b=1 c=1 -> specificity = 11 */
UL OL LI.red {...} /* a=0 b=1 c=3 -> specificity = 13 */
#x34y {...} /* a=1 b=0 c=0 -> specificity = 100 */

在 CSS1 中将优先选择级分成3组,将 id 挑选器做为 a 组,类挑选器做为 b 组,元素名做为 c 组,每组中出現1次,计数1次,依照先 a 组开展较为,同样的状况下,应用 b 组开展较为,最终是 c 组。甚么挑选器的优先选择级別高,甚么挑选器出示的款式合理。例如在上面的事例中,第 5 组应用 id 的级別最高,因此,这组的款式设定起效,而别的的设定可能被忽视掉。

在 CSS2 中,又提升了有关行内表明 style 的组,因此参加较为的构成以便 4 组,在其中 style 的优先选择级別最高。一样,在 CSS2 的规范表明中也出示了样例。

拷贝编码
编码以下:

* {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

<style type="text/css">
#x97z { color: red }
</style>
<p id="x97z" style="color: green">
</p>

在这个示例中,style 的优先选择级別最高,因此可能遮盖掉根据 id 开展的设定,色调为翠绿色。

4. 处理难题
根据上面的剖析能够看到,仅仅出示挑选器其实不足以可以起效,还要看挑选器的优先选择级別,在大家的难题中,即便应用 id 来挑选第1个菜单项:#first a ,包含了1个 id 和1个元素名,那末所得的优先选择级別为:a=0, b=1, c=0, d=1
但是,通用性的挑选器是这样的:ul#navlist li a,优先选择级中却包含了1个 id, 也有 3 个元素名字,因此优先选择级別为:
a=0, b=1, c=0, d=3
因此大家的挑选器沒有比过通用性的挑选器,不幸产生了!

了解了缘故,难题也就简易了,提升大家挑选器的优先选择级別,超出通用性挑选器的优先选择级便可以了,例如,大家能够写成这样:

拷贝编码
编码以下:

ul#navlist li#first a

如今的优先选择级是是多少呢
a=0, b=2, c=0, d=3
在 b 组较为的情况下就早已超出了,看看是不是早已取得成功了!

还能够再加关键性表明,还可以处理。!important 务必写在款式与分号之间,每一个款式务必独立申明。

拷贝编码
编码以下:

#first a
{
border: none !important;
}

来看挑选器并不是那末简易呀!