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

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

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

次のデモは、

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

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

::first-line vs. tag selector
 
This paragraph ...
 
::first-line vs class selector
 
This paragraph color i...
 
::first-line vs ID selector
 
This paragraph color is set ...
 
::first-line vs !important
 
This paragraph color is ....

https://codepen.io/KittyGiraudel/pen/kWabaa/569e082a67400f5fb39a96030d0e9b6c

# #効果を見てください:

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

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

および ::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; }

は、

を意味します。は

タグの要素ではありません。ただし、次の 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)

が引き続き

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

これを見たとき、立ち止まって考えてみてください。なぜ

要素の色は color: blueのままなのでしょうか? ＃＃＃＃＃＃どうしてこれなの？答え： ＃＃＃

这是由于 :not(p)同样能够选中 ，那么 的 color 即变成了 blue，由于 color是一个可继承属性，

标签继承了 的 color 属性，导致看到的

也是蓝色。

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

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

OK，这次

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

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

以上がCSS の面接での 2 つの質問をチェックして、基礎をテストしてください。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。