我正在学习CSS选择器的特性,并遇到以下示例。我想不出,哪个CSS选择器对另一个CSS有更高的特异性?
1.示例:
p#largetext
body p#largetex
2.示例:
p.largetext ul li
p ul li a
CSS的特殊性是如何相互作用的?为什么一个人更高,一个人更低?
我知道,使用纯CSS,不可能选择元素的先前兄弟姐妹。但我试图用复杂的选择器愚弄浏览器。
请看这个。它包含了几个CSS规则,除了其中的两个规则外,这些规则都很好地工作:
//set border color to white for all elements before .selected and .selected itself
div:not(.selected ~ div) {
border-color: #fff;
}
//set border color to green for the element previous to .selected
div:not(.sele
我有一个滑块,它是这样标记的:
<div class="slider wide">
//slider html in here
</div>
和另一个这样标记的:
<div class="slider narrow">
//slider html in here
</div>
是否可以通过连接类名的方式在我的CSS文件中引用其中的每一个,如下所示:
.slider.wide { //css specific to the wide slider goes here }
.slider.narrow { //css
我一直在跟踪的CSS细节。它将值分配给选择器,值之和最高的选择器将具有优先权。
id的值为100。类的值为10。
我的问题是在这个例子中我尝试过。
HTML
<div id="id" class="a b c d e f g h i j k l">What color?</div>
CSS
/* calculated specificity: 100 */
#id{
color:red;
}
/* calculated specificity: 120 */
.a.b.c.d.e.f.g.h.i.j.k.l{
color