Check out these two CSS interview questions to test your foundation!

<p>Jianweizhizhu, this article will share with you two interesting CSS interview questions to test your foundation!

<p>

<p>I saw such an interesting question in the forum today. The simple code is as follows:

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

<p>The style is as follows:

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

<p>I would like to ask, is the color of the text in the tag <p> green or blue?

<p>Interestingly, the final result here is blue, which means color: blue takes effect. [Recommended learning: css video tutorial]

<p>

<p> No, normally, shouldn’t the ID selector have a higher priority than the pseudo-class selector? ? Why does the pseudo-class selector have a higher priority here?

<p>And, after turning on the debug mode, we positioned the <p> element and only saw color: green taking effect, but no div:: was found. The style definition of first-line:

<p>

## Only when we go up one level and find the style rules of <p>

can we find the final You can see such a rule below:

<p>

Therefore, it is obvious here that the <p><p> tag inherits the parent element

This rule applies to the first row of elements, overwriting the color: green defined in the original ID selector.

Verify again

Here, another confusing point is why the ID selector has a higher priority than <p>::first-line The selector is lower.

Let’s make some simple attempts: <p>

The following DEMO shows the priority comparison of the <p>::first-line style and various selectors when they work together. Even !important rules are included:

Paragraph 1 is set to gray via the tag selector
Paragraph 2 is set to gray via the class selector
The 3rd paragraph is set to gray through the ID selector
The 4th paragraph is set to gray through !important bash

In summary, we use each paragraph at the same time Got the <p>::first-line selector.

<h2 id="first-line-nbsp-vs-nbsp-tag-nbsp-selector">::first-line vs. tag selector</h2>
<p>This paragraph ...</p>

<h2 id="first-line-nbsp-vs-nbsp-class-nbsp-selector">::first-line vs class selector</h2>
<p class="p2">This paragraph color i...</p>

<h2 id="first-line-nbsp-vs-nbsp-ID-nbsp-selector">::first-line vs ID selector</h2>
<p id="p3">This paragraph color is set ...</p>

<h2 id="first-line-nbsp-vs-nbsp-important">::first-line vs !important</h2>
<p id="p4">This paragraph color is ....</p>

rrree

CodePen Demo -- ::first-line: demo<p>

https://codepen.io/KittyGiraudel/pen/kWobaa/569e082a67400f5fb39a96030d0e9b6c<p>

Look at the effect: <p>

<p>

#You can see that no matter what selector it is, the priority is not as high as <p>::first-line.

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

This is why, in the MDN document, the double colon writing method is more recommended (of course, browsers support the single colon writing method) -- <p>MDN -- ::first-line

<p>

One more question, an example of an MDN error? An interesting phenomenon

After finishing the above question. Let’s look at another question, a very similar question. <p>

On the MDN page introducing <p>:not, there is an example:

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;
}

means, <p>:not(p) You can choose anything that is not <p> Element of tag. However, the actual results of the above CSS selector in the following HTML structure are not quite right.

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

The results are as follows:<p>

<p>

CodePen Demo -- :not pesudo demo<p>

https://codepen.io/ Chokcoco/pen/KKZbWjy<p>

means that <p>:not(p) can still select <p> elements. Yes, the results are the same across multiple browsers.

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

Why is this? Answer: <p><p>这是由于 :not(p) 同样能够选中 <body>，那么 <body> 的 color 即变成了 blue，由于 color 是一个可继承属性，<p> 标签继承了 <body> 的 color 属性，导致看到的 <p> 也是蓝色。

<p>我们把它改成一个不可继承的属性，试试看：

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

<p>

<p>OK，这次 <p>

没有边框体现，没有问题！

<p>因此，实际使用的时候，需要一定要注意样式继承的问题！

<p>（学习视频分享：css视频教程、web前端）

The above is the detailed content of Check out these two CSS interview questions to test your foundation!. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Show More

Hot Article

Assassin's Creed Shadows: Seashell Riddle Solution

3 weeks ago By DDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

2 weeks ago By DDD

Where to find the Crane Control Keycard in Atomfall

3 weeks ago By DDD

Assassin's Creed Shadows - How To Find The Blacksmith And Unlock Weapon And Armour Customisation

4 weeks ago By DDD

Roblox: Dead Rails - How To Complete Every Challenge

3 weeks ago By DDD

Show More

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Show More

Hot Topics

Where is the login entrance for gmail email?

7583

15

CakePHP Tutorial

1386

52

What is the format of the account name of steam

87

11

win11 activation key permanent

63

19

nyt connections hints and answers

28

117

Show More