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.
html5
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。