两道超有意思的 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 ...
随机推荐
- V.Internet基础及应用
- Linux中安装JDK详细步骤
一.下载Linux版本的JDK 进入官网下载对应的JDK,下载之前需要先登录 官网地址 -> https://www.oracle.com/ 登录成功后,找到对应的下载位置 根据自己电脑下载对应 ...
- 获取某个html元素相对于视窗的位置集合
getBoundingClientRect() getBoundingClientRect()获取元素位置,这个方法没有参数 getBoundingClientRect()用于获得页面中某个元素的左, ...
- 一个小 Trick
平方变两次 一个状态 \(S\) 有一个贡献,所有状态 \(S\) 组成集合 \(U\) . 然后我们要统计下面这个东西 \[ans=\sum_{S\in U}f^2(S) \] 然后我们就可以看作是 ...
- Vue 计算属性 && 监视属性
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...
- 「Python实用秘技10」深度比较Python对象间差异
本文完整示例代码及文件已上传至我的Github仓库https://github.com/CNFeffery/PythonPracticalSkills 这是我的系列文章「Python实用秘技」的第10 ...
- #万答10:mysqldump 是如何实现一致性备份的
万答10:mysqldump 是如何实现一致性备份的 实验场景 MySQL 8.0.25 InnoDB 实验步骤: 先开启 general_log 观察导出执行过程的变化 set global gen ...
- MySQL:关于MGR中监控的两个重要指标简析
欢迎来到 GreatSQL社区分享的MySQL技术文章,如有疑问或想学习的内容,可以在下方评论区留言,看到后会进行解答 转载声明:以下文章来源于MySQL学习 ,作者八怪(高鹏) 一.两个重要的指标 ...
- 使用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: ...
- Web 前端实战:Gitee 贡献图
前言 这次要做的 Web 前端实战是一个 Gitee 个人主页下的贡献图(在线 Demo),偶尔做一两个,熟悉熟悉 JS 以及 jQ.整体来说这个案例并不难,主要是控制第一个节点以及最后一个节点处于星 ...