当前位置: 首页 > 科技观察

两道超级有趣的CSS面试题,试试你的基础

时间:2023-03-14 13:20:25 科技观察

今天在论坛看到这么一道很有意思的题,简单代码如下:

第一段

样式如下:p#a{color:green;}div::first-line{color:blue;}请问,

标签中文字的颜色是绿色还是蓝色?有意思的是,这里最后的结果是蓝色,也就是color:blue生效。不,通常情况下,ID选择器不应该比伪类选择器有更高的优先级吗?为什么伪类选择器在这里有更高的优先级?并且,开启debug模式,我们定位到

元素,只看到color:green生效了,但是没有找到div::first-line的样式定义:只往上一层,我们找到了样式

规则,你可以在底部看到这样一条规则:因此,这里很明显,**

标签从父元素

继承了这条规则,并将其应用于第一行元素。覆盖ID选择器中定义的原始颜色:绿色**。再验证一下,还有一个比较迷惑的地方就是为什么ID选择器的优先级低于::first-line选择器。让我们做一些简单的尝试:下面的DEMO展示了::first-line样式和各种选择器一起工作时的优先级比较,甚至包括!important规则:第一段被标签选择器设置为灰色。类选择器将段2变灰。第3段显示为灰色,带有ID选择器。第4段被!importantbash变灰。总之,我们还在每个段落中使用了::第一行选择器。

::first-linevs.tag选择器

Thisparagraph...

::first-linevs.class选择器

Thisparagraphcolori...

::first-linevsID选择器

Thisparagraphcolorisset...

::first-linevs!important

这一段的颜色是....

p{color:#444;}p::first-line{color:deepskyblue;}.p2{color:#444;}.p2::first-line{color:tomato;}#p3{color:#444;}#p3::first-line{color:firebrick;}#p4{color:#444!important;}#p4::first-line{color:hotpink;}CodePenDemo--::first-line:demo[1].看效果:可以看到不管选择器是什么,优先级都没有::first-line高。原因是::first-line实际上是一个伪元素而不是伪类。它选中的内容实际上会被当作元素的子元素,类似于::before,::aftersame,因此,对于父元素的颜色规则,对于它来说只是一种级联关系,::first-line本身定义的规则具有更高的优先级!这就是为什么,在MDN文档中,更推荐使用双冒号(当然所有浏览器都支持单冒号)--MDN--::first-line[2]。还有一个问题,MDN的错误例子?一个有趣的现象结束了上面的问题。我们再来看一个问题,非常相似。在MDN介绍:notpage中,有这样一个例子:/*SelectsanyelementthatisNOTaparagraph*/:not(p){color:blue;}表示,:not(p)可以选择任何不是段落的元素不是

标签元素。但是,上面的CSS选择器,在下面的HTML结构中,测出来的结果不太对。

p

div
span

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。