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

<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. V.Internet基础及应用

  2. Linux中安装JDK详细步骤

    一.下载Linux版本的JDK 进入官网下载对应的JDK,下载之前需要先登录 官网地址 -> https://www.oracle.com/ 登录成功后,找到对应的下载位置 根据自己电脑下载对应 ...

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

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

  4. 一个小 Trick

    平方变两次 一个状态 \(S\) 有一个贡献,所有状态 \(S\) 组成集合 \(U\) . 然后我们要统计下面这个东西 \[ans=\sum_{S\in U}f^2(S) \] 然后我们就可以看作是 ...

  5. Vue 计算属性 && 监视属性

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...

  6. 「Python实用秘技10」深度比较Python对象间差异

    本文完整示例代码及文件已上传至我的Github仓库https://github.com/CNFeffery/PythonPracticalSkills 这是我的系列文章「Python实用秘技」的第10 ...

  7. #万答10:mysqldump 是如何实现一致性备份的

    万答10:mysqldump 是如何实现一致性备份的 实验场景 MySQL 8.0.25 InnoDB 实验步骤: 先开启 general_log 观察导出执行过程的变化 set global gen ...

  8. MySQL:关于MGR中监控的两个重要指标简析

    欢迎来到 GreatSQL社区分享的MySQL技术文章,如有疑问或想学习的内容,可以在下方评论区留言,看到后会进行解答 转载声明:以下文章来源于MySQL学习 ,作者八怪(高鹏) 一.两个重要的指标 ...

  9. 使用SSH连接解决git报错:fatal: unable to access 'https://github.com/xxx/xxx.github.io.git/': Proxy CONNECT aborted

    TL;DRs 这个错误的原因和HTTPS的代理配置有关,使用SSH方式连接可以避免这一问题 最近git pull和push的时候总是报错 fatal: unable to access 'https: ...

  10. Web 前端实战:Gitee 贡献图

    前言 这次要做的 Web 前端实战是一个 Gitee 个人主页下的贡献图(在线 Demo),偶尔做一两个,熟悉熟悉 JS 以及 jQ.整体来说这个案例并不难,主要是控制第一个节点以及最后一个节点处于星 ...