CSS の面接での 2 つの質問をチェックして、基礎をテストしてください。

Jianweizhizhu、この記事では、基礎をテストするための CSS 面接の興味深い質問を 2 つ紹介します。

今日フォーラムでとても興味深い質問を見つけました。簡単なコードは次のとおりです:

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

スタイルは次のとおりです:

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

お聞きしたいのですが、タグのテキストの色は <p></p> 緑ですか、それとも青ですか?

興味深いことに、ここでの最終結果は青です。これは、color: blue が有効になることを意味します。 [推奨される学習: css ビデオ チュートリアル ]

いいえ、通常、ID セレクターは疑似クラス セレクターよりも高い優先順位を持つべきではないでしょうか。 ?ここで疑似クラス セレクターの優先順位が高いのはなぜですか?

そして、デバッグ モードをオンにした後、<p></p> 要素を配置すると、color: green のみが有効になり、div は有効になりませんでした。 :: が見つかりました。最初の行 のスタイル定義:

## 1 つ上のレベルに進み、<p></p>

のスタイル ルールを見つけた場合のみです。 最後のルールを見つけることができますか? そのようなルールは以下で確認できます:

したがって、ここでは、

# が次のとおりであることは明らかです。 ## タグは親要素を継承します <div> このルールは要素の最初の行に適用され、元の ID セレクターで定義されている <code>color: green を上書きします。 もう一度確認してください

ここで、もう 1 つのわかりにくい点は、なぜ ID セレクターの優先順位が

::first-line

よりも高いのかということです。セレクターのほうが低いのです。 。 いくつかの簡単な試みをしてみましょう:

次のデモは、

::first-line

スタイルとさまざまなセレクターが連携した場合の優先順位の比較を示しています。 #!重要 ルールが含まれています: 段落 1 はタグ セレクターを介して灰色に設定されます

段落 2 はクラス セレクターを介して灰色に設定されます
• 3 番目の段落は、ID セレクターによってグレーに設定されます
• 4 番目の段落は、!重要な bash によってグレーに設定されます
• 要約すると、各段落を同時に使用します。
::first-line

セレクター。

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

errreeCodePen デモ -- ::first-line: デモ

https://codepen.io/KittyGiraudel/pen/kWabaa/569e082a67400f5fb39a96030d0e9b6c<p></p># #効果を見てください: <p></p>

<p></p>#どのセレクターであっても、優先度は

::first-line## ほど高くないことがわかります。 ＃。

その理由は、

::first-line は実際には疑似クラスではなく疑似要素であり、それによって選択されたコンテンツは実際には子として扱われるためです。要素の要素。処理は

::before

および ::after と似ています。したがって、親要素のカラー ルールは ## を介した単なるカスケード関係です。 #: :first-line 独自に定義されたルールの方が優先されます。 これが、MDN ドキュメントでは二重コロンの記述方法がより推奨される理由です (もちろん、ブラウザは単一コロンの記述方法をサポートしています) -- MDN -- ::first-行

もう 1 つの質問ですが、MDN エラーの例を教えてください。興味深い現象

上記の質問を終えた後。非常によく似た別の質問を見てみましょう。

:not を紹介する MDN ページには、例があります:

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

は、

:not(p)

を意味します。は <p></p> タグの要素ではありません。ただし、次の HTML 構造における上記の CSS セレクターの実際の結果は完全に正しくありません。

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

結果は次のとおりです:

CodePen デモ -- :not pesudo デモ

https://codepen .io/ Chokcoco/pen/KKZbWjy

は、

:not(p)

が引き続き <p></p> <p></p> 要素を選択できることを意味します。はい、結果は複数のブラウザーで同じです。

これを見たとき、立ち止まって考えてみてください。なぜ <p></p> 要素の色は color: blue のままなのでしょうか? ＃＃＃＃＃＃どうしてこれなの？答え： ＃＃＃

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

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

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

OK，这次 <p></p> 没有边框体现，没有问题！

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

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