两道超有意思的 CSS 面试题,试试你的基础
今天在论坛,有看到这样一道非常有意思的题目,简单的代码如下:
<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 面试题,试试你的基础的更多相关文章
- 一道有意思的 CSS 面试题,FizzBuzz ~
FizzBuzz 是一道很有意思的题目.我们来看看题目: 如果遇见了 3 的倍数要说 Fizz,5 的倍数就说 Buzz,如果即是 3 的倍数又是 5 的倍数就说 FizzBuzz. 如果是在一些 ...
- 几道坑人的PHP面试题 试试看看你会不会也中招
这篇文章主要介绍了几道坑人的PHP面试题,试试看看你会不会也中招,这些题目都用了一些障眼法,需要你有一双火眼金睛哦,需要的朋友可以参考下 这几道题是在德问上看到的,感觉挺有意思,拿来给大家分享其中的陷 ...
- 前端Html和Css面试题
前端Html和Css面试题Html篇:1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: trident内核 Firefox:gecko内核 Safari:webkit内核 Ope ...
- 2019前端面试系列——CSS面试题
盒模型 /* 红色区域的大小是多少?200 - 20*2 - 20*2 = 120 */ .box { width: 200px; height: 200px; padding: 20px; marg ...
- 两个有意思的模式在ECMAScript中的实现
简介 本篇文章对设计模式进行了筛选, 只列举两个有意思(坑)的设计实现, 如有错误愿闻其详. 构造函数 ECMAScript中的构造函数和其他语言的有那么点特别之处,可以认为, 一个函数, 如果被以n ...
- 一道灵活的css笔试题
今天在网上看到一css笔试题,乍一看很简单,实则内部暗藏玄机,题目大概是:九宫格,每格长宽50px,边框宽度5px,鼠标经过边框变红,效果如下: 鼠标路过时: 以下是代码(如有不足之处望多加指正) & ...
- css 题目笔记(本文收集了一些个人觉得比较有意思的css题目,欢迎大家给出自己的解答)
1.本文收集了一些个人觉得比较有意思的css题目,欢迎大家给出自己的解答 P标签的最大宽度不可以大于H2标签文字宽度的10% 这里应该是P标签的最大宽度由前面的匿名内联元素宽度(就是大字号文字宽度)决 ...
- 一个有意思的CSS样式库--BUTTONS
我最近发现了一个有意思的CSS样式库,和Bootstrap相似,但是它是专门的一个高度可定制的,免费的并且开源的按钮CSS样式库,这里附上它的网址:http://www.bootcss.com/p/b ...
- Java面试题总结之Java基础(二)
Java面试题总结之Java基础(二) 1.写clone()方法时,通常都有一行代码,是什么? 答:super.clone(),他负责产生正确大小的空间,并逐位复制. 2.GC 是什么? 为什么要有G ...
随机推荐
- 从零开始手写Cartographer(1): 开端
写在前面的话 我做SLAM已经三年了.读书时初学SLAM,一开始无从下手,直到读了高博士的博客,茅塞顿开,渐入佳境.后来又买了他的<视觉SLAM十四讲>,常伴手边,直至毕业.几个月前找工作 ...
- PostgreSQL下的SQL Shell(psql)工具
首发微信公众号:SQL数据库运维 原文链接:https://mp.weixin.qq.com/s?__biz=MzI1NTQyNzg3MQ==&mid=2247485130&idx=1 ...
- 86开关、家电、台扇等6键6路6感应通道高抗干扰触摸IC-VK3606D,稳定性好,抗干扰能力强
概述: VK3606D SOP16具有6个触摸按键,可用来检测外部触摸按键上人手的触摸动作.该芯片具有较高的集成度,仅需极少的外部组件便可实现触摸按键的检测.提供了6路1对1直接输出低电平有效.最长输 ...
- 获取某个html元素相对于视窗的位置集合
getBoundingClientRect() getBoundingClientRect()获取元素位置,这个方法没有参数 getBoundingClientRect()用于获得页面中某个元素的左, ...
- 丽泽普及2022交流赛day21 社论
A 暴力 . greater<double> -> greater<int> \(100\) -> \(50\) 代码丢了 . B dp . 考场上代码抢救一下就过 ...
- FHQ-Treap 简介
FHQ-treap 即非旋Treap,是一种短小精悍,功能丰富的平衡树. 据说它的效率介于 Treap 和 Splay 之间(可能是我的FHQ常数比较小,跑得比我的Treap还快). 它可以实现 Sp ...
- mybatis 02: 添加并简单使用mybatis
三层架构 项目开发时,遵循的一种设计模式,分为三层 界面层:用来接收客户端输入的数据,调用业务逻辑层进行功能处理,返回结果给客户端 过去的servlet就完成了界面层的功能(但是他做的更多) 业务逻辑 ...
- 对于Java中的Loop或For-each,哪个更快
Which is Faster For Loop or For-each in Java 对于Java中的Loop或Foreach,哪个更快 通过本文,您可以了解一些集合遍历技巧. Java遍历集合有 ...
- MySQL索引知识点&面试常见问题
来源:BiggerBoy 作者:北哥 原文链接:https://mp.weixin.qq.com/s/fucHvdRK5wRrDfBOo6IBGw 大家好我是北哥,今天整理了MySQL索引相关的知识点 ...
- 【Java】学习路径49-练习:使用两个不同的线程类实现买票系统
练习:使用两个不同的线程类实现买票系统 请创建两个不同的线程类.一个测试类以及一个票的管理类. 其中票的管理类用于储存票的数量.两个线程类看作不同的买票方式. 步骤: 1.创建所需的类 App售票线程 ...