CSS:同样元素不一样构造反复界定的难题

日期:2021-03-16 类型:科技新闻 

关键词:图片模板,淘宝作图用什么软件好,在线制作白底图,设计图制作软件,抠图软件


CSS挑选器是搭建CSS的基本.在为大中型,繁杂嵌套循环的(x)HTML文本文档开展款式界定时,很有将会会遇到对于同样元素在不一样构造下的反复界定的难题,这个难题也是前端开发开发设计人员相对性头痛的难题.
在这类状况 (对于同样元素在不一样构造下的反复界定) 产生的前提条件下,访问器在3D渲染网页页面文档时,会依照1定标准开展优先选择级排序,随后依据这个优先选择级权重对产生情况的元素开展解决.
而这个访问器遵照的标准是甚么呢?
让大家看来1段简易的HTML编码:

<body id="content">
<div class="box">
<p class="italic">For Testing 2</p>
<em id="em" class="wrap">For Testing 3</em>
</div>
</body>

这是段非常简易的HTML编码,可是具备非常的意味着性.大家渐渐地就可以发现它为何具备意味着性了.
最先大家来再加1点简易的CSS申明:

p{ /*1 */
color:pink;
}
p.italic{ /*11 */
color:red;
}
div.box p{ /*12 */
color:black;
}
div p{ /*2 */
color:blue;
}
#content div p{ /*102 */
color:orange;
}
div p.italic{ /*12 */
color:green;
}
body div p{ /*3 */
color:olive;
}
body div p.italic{ /*13 */
color:gray;
}

大伙儿来猜猜看結果中的"For Testing2"是甚么色调的呢?嗯...不消耗大伙儿眼神了,結果是orange的,怪异吗?有疑惑吗?大伙儿有木有留意到我在CSS中添加的注解中的数据?这是甚么呢?这是CSS挑选器特点权重值.
id挑选器,class类挑选器,HTML标识挑选器,这3种挑选器便是组成CSS承继的组件,访问器在3D渲染它们的情况下是有优先选择权的.而这个优先选择权在1定状况下是能够测算出来的.
    统计分析在这个挑选器里边ID挑选器的数目为a 统计分析在这个挑选器里边类的挑选器,特性挑选器和伪类为b 统计分析在这个挑选器里边的元素名字数目为c,在其中要忽视伪元素.串连3个数据为a-b-c,获得特点值.

连接起来这3个数据便可以获得特点值.

* /* a=0 b=0 c=0 -> 特点值 = 0 */
li/* a=0 b=0 c=1 -> 特点值 = 1 */
ul li /* a=0 b=0 c=2 -> 特点值 = 2 */
ulol li /* a=0 b=0 c=3 -> 特点值 = 3 */
h1 *[rel=up] /* a=0 b=1 c=1 -> 特点值 =11 */
ulol li.red /* a=0 b=1 c=3 -> 特点值 =13 */
li.red.level /* a=0 b=2 c=1 -> 特点值 =21 */
#x34y /* a=1 b=0 c=0 -> 特点值 = 100 */
#s12:not(FOO) /* a=1 b=0 c=1 -> 特点值 = 101 */

这样就可以搞清楚上面编码中的数据的含意了.
是否就这么简易呢?
应当也有回味无穷的地区.
例如说我得出这样1组CSS来界定上面的HTML:

p.italic { /* 11 */
color: black;
}
div .italic { /* 11 */
color: red;
}
.box p{ /*11 */
color:green;
}
.box em#em{ /* 111*/
color:blue
}
body#content .wrap{ /* 111*/
color:red
}
body .box #em{ /*111*/
color:green
}
#content .box em{ /*111*/
color:gray
}

这里的前3条权重值全是11,后4条申明的权重值全是111,那大家应当如何分辨呢?
最先,大家看这条申明最后界定的是哪一个元素.前3条全是界定<p>...</p>这个元素的,不难从中总结出1条规律性:在申明中申明了元素的HTML标识的,权重又能够提升0.5,那末依据上面的事例,权重值就会变为:

p.italic { /* 11.5 */
color: black;
}
div .italic { /* 11 */
color: red;
}
.box p{ /*11.5 */
color:green;
}

能够发现第1条和第3条的权重值還是1样的,大家试着互换1下她们的部位,天哪,它们之间是能够互相遮盖的.对,那就证实它们是真实的同层(level)申明.
那一样的后4条申明还可以这样剖析了:

.box em#em{ /* 111.5*/
color:blue
}
body#content .wrap{ /* 111*/
color:red
}
body .box #em{ /*111*/
color:green
}
#content .box em{ /*111.5*/
color:gray
}

在这里的第1条和第4条权重值同样,第2条和第3条权重值同样.经互换试验也能发现这个标值的正确性.以前的权重测算公式以前出現在Eric的书中和W3的CSS3标准文稿中[http://www.w3.org/TR/css3-selectors/#specificity].这个半点权重法能够说是我造就的呦~啊哈哈哈.