今天在论坛,有看到这样一道非常有意思的题目,简单的代码如下:

<div>
<p id="a">First Paragraph</p>
</div>

样式如下:

p#a {
color: green;
}
div::first-line {
color: blue;
}

试问,标签 <p> 内的文字的颜色,是 green 还是 blue 呢?

有趣的是,这里的最终结果是蓝色,也就是 color: blue 生效了。

不对,正常而言,ID 选择器的优先级不应该比伪类选择器高么?为什么这里反而是伪类选择器的优先级更高呢?

并且,打开调试模式,我们定位到 <p> 元素上,只看到了 color: green 生效,没找到 div::first-line 的样式定义:

只有再向上一层,我们找到 <div> 的样式规则,才能在最下面看到这样一条规则:

因此,这里很明显,是<p> 标签继承了父元素 <div> 的这条规则,并且作用到了自身第一行元素之上,覆盖了原本的 ID 选择器内定义的 color: green

再进行验证

这里,另外一个比较迷惑的点在于,为什么 ID 选择器的优先级比 ::first-line 选择器更低。

我们再做一些简单的尝试:

下面的 DEMO 展示了 ::first-line 样式和各种选择器共同作用时的优先级对比,甚至包括了 !important 规则:

  • 第 1 段通过标签选择器设置为灰色
  • 第 2 段通过类选择器设置为灰色
  • 第 3 段通过 ID 选择器设置为灰色
  • 第 4 段通过 !important bash 设置为灰色

综上的同时,每一段我们同时都使用了 ::first-line 选择器。

<h2>::first-line vs. tag selector</h2>
<p>This paragraph ...</p> <h2>::first-line vs class selector</h2>
<p class="p2">This paragraph color i...</p> <h2>::first-line vs ID selector</h2>
<p id="p3">This paragraph color is set ...</p> <h2>::first-line vs !important</h2>
<p id="p4">This paragraph color is ....</p>
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;
}

CodePen Demo -- ::first-line: demo

看看效果:

可以看到,无论是什么选择器,优先级都没有 ::first-line 高。

究其原因,在于,::first-line 其实是个伪元素而不是一个伪类,被其选中的内容其实会被当成元素的子元素进行处理,类似于 ::before::after 一样,因此,对于父元素的 color 规则,对于它而言只是一种级联关系,通过 ::first-line 本身定义的规则,优先级会更高!

这也是为什么,在 MDN 文档中,更推荐的是双冒号的写法(当然浏览器都支持单冒号的写法)-- MDN -- ::first-line

再来一题,MDN 的错误例子?一个有意思的现象

说完上面这题。我们再来看看一题,非常类似的题目。

在 MDN 介绍 :not 的页面,有这样一个例子:

/* Selects any element that is NOT a paragraph */
:not(p) {
color: blue;
}

意思是,:not(p) 可以选择任何不是 <p> 标签的元素。然而,上面的 CSS 选择器,在如下的 HTML 结构,实测的结果不太对劲。

<p>p</p>
<div>div</div>
<span>span</span>
<h1>h1</h1>

结果如下:

CodePen Demo -- :not pesudo demo

意思是,:not(p) 仍然可以选中 <p> 元素。是的,在多个浏览器,得到的效果都是一致的。

看到这里,你可以再停一下,思考一下,为什么 <p> 元素的颜色仍旧是 color: blue

这是为什么呢?解答一下:

这是由于 :not(p) 同样能够选中 <body>,那么 <body> 的 color 即变成了 blue,由于 color 是一个可继承属性,<p> 标签继承了 <body> 的 color 属性,导致看到的 <p> 也是蓝色。

我们把它改成一个不可继承的属性,试试看:

/* Selects any element that is NOT a paragraph */
:not(p) {
border: 1px solid;
}

OK,这次 <p> 没有边框体现,没有问题!

因此,实际使用的时候,需要一定要注意样式继承的问题!

最后

本文到此结束,希望对你有帮助

更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。

如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

两道超有意思的 CSS 面试题,试试你的基础的更多相关文章

  1. 一道有意思的 CSS 面试题,FizzBu​​zz ~

    FizzBu​​zz 是一道很有意思的题目.我们来看看题目: 如果遇见了 3 的倍数要说 Fizz,5 的倍数就说 Buzz,如果即是 3 的倍数又是 5 的倍数就说 FizzBuzz. 如果是在一些 ...

  2. 几道坑人的PHP面试题 试试看看你会不会也中招

    这篇文章主要介绍了几道坑人的PHP面试题,试试看看你会不会也中招,这些题目都用了一些障眼法,需要你有一双火眼金睛哦,需要的朋友可以参考下 这几道题是在德问上看到的,感觉挺有意思,拿来给大家分享其中的陷 ...

  3. 前端Html和Css面试题

    前端Html和Css面试题Html篇:1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: trident内核 Firefox:gecko内核 Safari:webkit内核 Ope ...

  4. 2019前端面试系列——CSS面试题

    盒模型 /* 红色区域的大小是多少?200 - 20*2 - 20*2 = 120 */ .box { width: 200px; height: 200px; padding: 20px; marg ...

  5. 两个有意思的模式在ECMAScript中的实现

    简介 本篇文章对设计模式进行了筛选, 只列举两个有意思(坑)的设计实现, 如有错误愿闻其详. 构造函数 ECMAScript中的构造函数和其他语言的有那么点特别之处,可以认为, 一个函数, 如果被以n ...

  6. 一道灵活的css笔试题

    今天在网上看到一css笔试题,乍一看很简单,实则内部暗藏玄机,题目大概是:九宫格,每格长宽50px,边框宽度5px,鼠标经过边框变红,效果如下: 鼠标路过时: 以下是代码(如有不足之处望多加指正) & ...

  7. css 题目笔记(本文收集了一些个人觉得比较有意思的css题目,欢迎大家给出自己的解答)

    1.本文收集了一些个人觉得比较有意思的css题目,欢迎大家给出自己的解答 P标签的最大宽度不可以大于H2标签文字宽度的10% 这里应该是P标签的最大宽度由前面的匿名内联元素宽度(就是大字号文字宽度)决 ...

  8. 一个有意思的CSS样式库--BUTTONS

    我最近发现了一个有意思的CSS样式库,和Bootstrap相似,但是它是专门的一个高度可定制的,免费的并且开源的按钮CSS样式库,这里附上它的网址:http://www.bootcss.com/p/b ...

  9. Java面试题总结之Java基础(二)

    Java面试题总结之Java基础(二) 1.写clone()方法时,通常都有一行代码,是什么? 答:super.clone(),他负责产生正确大小的空间,并逐位复制. 2.GC 是什么? 为什么要有G ...

随机推荐

  1. 从零开始手写Cartographer(1): 开端

    写在前面的话 我做SLAM已经三年了.读书时初学SLAM,一开始无从下手,直到读了高博士的博客,茅塞顿开,渐入佳境.后来又买了他的<视觉SLAM十四讲>,常伴手边,直至毕业.几个月前找工作 ...

  2. PostgreSQL下的SQL Shell(psql)工具

    首发微信公众号:SQL数据库运维 原文链接:https://mp.weixin.qq.com/s?__biz=MzI1NTQyNzg3MQ==&mid=2247485130&idx=1 ...

  3. 86开关、家电、台扇等6键6路6感应通道高抗干扰触摸IC-VK3606D,稳定性好,抗干扰能力强

    概述: VK3606D SOP16具有6个触摸按键,可用来检测外部触摸按键上人手的触摸动作.该芯片具有较高的集成度,仅需极少的外部组件便可实现触摸按键的检测.提供了6路1对1直接输出低电平有效.最长输 ...

  4. 获取某个html元素相对于视窗的位置集合

    getBoundingClientRect() getBoundingClientRect()获取元素位置,这个方法没有参数 getBoundingClientRect()用于获得页面中某个元素的左, ...

  5. 丽泽普及2022交流赛day21 社论

    A 暴力 . greater<double> -> greater<int> \(100\) -> \(50\) 代码丢了 . B dp . 考场上代码抢救一下就过 ...

  6. FHQ-Treap 简介

    FHQ-treap 即非旋Treap,是一种短小精悍,功能丰富的平衡树. 据说它的效率介于 Treap 和 Splay 之间(可能是我的FHQ常数比较小,跑得比我的Treap还快). 它可以实现 Sp ...

  7. mybatis 02: 添加并简单使用mybatis

    三层架构 项目开发时,遵循的一种设计模式,分为三层 界面层:用来接收客户端输入的数据,调用业务逻辑层进行功能处理,返回结果给客户端 过去的servlet就完成了界面层的功能(但是他做的更多) 业务逻辑 ...

  8. 对于Java中的Loop或For-each,哪个更快

    Which is Faster For Loop or For-each in Java 对于Java中的Loop或Foreach,哪个更快 通过本文,您可以了解一些集合遍历技巧. Java遍历集合有 ...

  9. MySQL索引知识点&面试常见问题

    来源:BiggerBoy 作者:北哥 原文链接:https://mp.weixin.qq.com/s/fucHvdRK5wRrDfBOo6IBGw 大家好我是北哥,今天整理了MySQL索引相关的知识点 ...

  10. 【Java】学习路径49-练习:使用两个不同的线程类实现买票系统

    练习:使用两个不同的线程类实现买票系统 请创建两个不同的线程类.一个测试类以及一个票的管理类. 其中票的管理类用于储存票的数量.两个线程类看作不同的买票方式. 步骤: 1.创建所需的类 App售票线程 ...