其他
社区精选 | 见微知著，从两道有意思的 CSS 面试题，考察你的基础
今天小编为大家带来的是社区作者 chokcoco 的文章，让我们一起从两道有意思的 CSS 面试题，考察你的基础。
<div>
<p id="a">First Paragraph</p>
</div>
p#a {
color: green;
}
div::first-line {
color: blue;
}
再进行验证
第 1 段通过标签选择器设置为灰色 第 2 段通过类选择器设置为灰色 第 3 段通过 ID 选择器设置为灰色 第 4 段通过 bash 设置为灰色
<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 </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 ;
}
#p4::first-line {
color: hotpink;
}
再来一题，MDN 的错误例子？一个有意思的现象
/* Selects any element that is NOT a paragraph */
:not(p) {
color: blue;
}
<p>p</p>
<div>div</div>
<span>span</span>
<h1>h1</h1>
/* Selects any element that is NOT a paragraph */
:not(p) {
border: 1px solid;
}