今天在论坛看到这么一道很有意思的题,简单代码如下:
标签中文字的颜色是绿色还是蓝色?有意思的是,这里最后的结果是蓝色,也就是color:blue生效。不,通常情况下,ID选择器不应该比伪类选择器有更高的优先级吗?为什么伪类选择器在这里有更高的优先级?并且,开启debug模式,我们定位到
元素,只看到color:green生效了,但是没有找到div::first-line的样式定义:只往上一层,我们找到了样式
标签从父元素
::first-linevs.tag选择器
Thisparagraph...
::first-linevs.class选择器
::first-linevsID选择器
::first-linevs!important
标签元素。但是,上面的CSS选择器,在下面的HTML结构中,测出来的结果不太对。
p
h1
结果如下:CodePenDemo--:notpesudodemo[3].意思是,:not(p)仍然可以选择元素。是的,在多个浏览器中,得到的效果是一致的。看到这里,你可以停下来想一想,为什么
元素的颜色还是color:blue?为什么是这样?答:这是因为:not(p)也可以选择
,那么的颜色就变成了blue,因为color是一个可继承的属性,标签继承了
的color属性,所以看到的也是蓝色的。让我们把它改成一个不可继承的属性,试试看:/*SelectsanyelementthatisNOTaparagraph*/:not(p){border:1pxsolid;}OK,这次
没有边框,没问题!所以,在实际使用中,需要注意样式继承的问题!最后,本文到此结束,希望对你有所帮助:)参考[1]CodePenDemo--::第一线:demo:https://codepen.io/KittyGiraudel/pen/kWobaa/569e082a67400f5fb39a96030d0e9b6c。[2]MDN--::first-line:https://developer.mozilla.org/en-US/docs/Web/CSS/::first-line。[3]CodePenDemo--:notpesudodemo:https://codepen.io/Chokcoco/pen/KKZbWjy。[4]Github--iCSS:https://github.com/chokcoco/iCSS。