头图

See the micro-knowledge, from two interesting CSS interview questions, examine your foundation

In the forum today, I saw such a very interesting topic. The simple code is as follows:

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

The style is as follows:

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

Let me ask, is the color of the text in the label <p> green or blue?

Interestingly, the end result here is blue, which is color: blue in effect.

No, normally, shouldn't ID selectors have higher priority than pseudo-class selectors? Why is the priority of the pseudo-class selector higher here?

And, open the debug mode, we locate the <p> element, only see the color: green effective, but did not find the style definition of div::first-line :

Only when we go up one level, we find the style rule of <div> , can we see such a rule at the bottom:

Therefore, it is obvious here that the <p> tag inherits the rule of the parent element <div> , and applies to the first line element of itself, covering the original ID selector. Defined color: green .

verify again

Another point of confusion here is why the ID selector has a lower priority than the ::first-line selector.

Let's do some simple attempts:

The following DEMO shows the ::first-line style and the priority comparison of various selectors when working together, and even includes the !important rule:

  • Paragraph 1 is greyed out via the tag selector
  • Paragraph 2 is greyed out via the class selector
  • Segment 3 is greyed out via the ID selector
  • Paragraph 4 greyed out via !important bash

To sum up, we use the ::first-line selector for each paragraph at the same time.

 <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

Take a look at the effect:

It can be seen that no matter what the selector is, the priority is not ::first-line high.

The reason is that ::first-line is actually a pseudo-element rather than a pseudo-class, and the selected content will actually be treated as a child element of the element, similar to ::before , ::after The same, therefore, for the color rule of the parent element, it is just a cascade relationship, through the rules defined by ::first-line itself, the priority will be higher!

This is why, in the MDN document, the double colon is more recommended (of course, browsers all support the single colon) -- MDN -- ::first-line

One more question, the wrong example of MDN? an interesting phenomenon

Finish the above question. Let's look at another question, a very similar one.

In the page of MDN introduction :not , there is such an example:

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

Meaning, :not(p) can select any element that is not a <p> tag. However, the above CSS selector, in the following HTML structure, the measured results are not quite right.

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

The result is as follows:

CodePen Demo -- :not pesudo demo

Meaning, :not(p) can still select the <p> element. Yes, in multiple browsers, the effect is the same.

When you see this, you can stop and think about it, why the color of the <p> element is still color: blue ?

Why is this? To answer:

:not(p) <body> ,那么<body>的color blue ,由于color is an inheritable attribute, the <p> tag inherits the color attribute of ---2b69f631108a4dbef78772f6b26234dd <body> , which leads to the <p> which is also seen in blue.

Let's make it a non-inheritable property and try it out:

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

OK, this time <p> there is no frame, no problem!

Therefore, when actually using it, you need to pay attention to the problem of style inheritance!

at last

This concludes this article, I hope it helps you :)

If you want to get the most interesting CSS information, don't miss my official account -- iCSS front-end anecdotes 😄

<img width=160 src="https://raw.githubusercontent.com/chokcoco/chokcoco/main/gzh_style.png">

More wonderful CSS technical articles are summarized in my Github -- iCSS , which will be updated continuously. Welcome to click star to subscribe to the collection.

If you have any questions or suggestions, you can communicate more. Original articles are limited in writing and knowledge. If there are any inaccuracies in the article, please let me know.


iCSS
CSS 奇技淫巧,在这里,都有。
9.7k 声望
18.1k 粉丝
0 条评论
推荐阅读
vh 存在问题?试试动态视口单位之 dvh、svh、lvh
大部分同学都知道,在 CSS 世界中,有 vw、vh、vmax、vmin 这几个与视口 Viewport 相关的单位。正常而言:1vw 等于1/100的视口宽度 (Viewport Width)1vh 等于1/100的视口高度 (Viewport Height)vmin — vmin ...

chokcoco9阅读 719评论 2

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木150阅读 12.3k评论 10

正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青55阅读 7.8k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy46阅读 6k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木66阅读 6.2k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.3k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木44阅读 7.4k评论 6

9.7k 声望
18.1k 粉丝
宣传栏