Check out these two CSS interview questions to test your foundation!-CSS Tutorial-php.cn

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

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

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

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

Copy after login

The style is as follows:

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

Copy after login

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

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

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?

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

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

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

Therefore, it is obvious here that the  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 ::first-line The selector is lower.

Let’s make some simple attempts:

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

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

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

Copy after login

rrree

CodePen Demo -- ::first-line: demo
https://codepen.io/KittyGiraudel/pen/kWobaa/569e082a67400f5fb39a96030d0e9b6c

Look at the effect:

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

The reason is that ::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) -- MDN -- ::first-line

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.

On the MDN page introducing :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;
}

Copy after login

means, :not(p) You can choose anything that is not

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

Copy after login

The results are as follows:

CodePen Demo -- :not pesudo demo
https://codepen.io/ Chokcoco/pen/KKZbWjy

means that :not(p) can still select 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 element still color: blue?

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

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

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

Copy after login

OK，这次  没有边框体现，没有问题！

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

（学习视频分享：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!

Related labels：

css

source：segmentfault.com

Previous article：CSS tip: Use transition to retain hover state Next article：The Complete Guide to CSS Media Queries (Media Qures)

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