Jianweizhizhu、この記事では、基礎をテストするための CSS 面接の興味深い質問を 2 つ紹介します。
今日フォーラムでとても興味深い質問を見つけました。簡単なコードは次のとおりです:
First Paragraph
スタイルは次のとおりです:
p#a { color: green; } div::first-line { color: blue; }
お聞きしたいのですが、タグのテキストの色は
緑ですか、それとも青ですか?
興味深いことに、ここでの最終結果は青です。これは、
color: blue
が有効になることを意味します。 [推奨される学習:
css ビデオ チュートリアル]
いいえ、通常、ID セレクターは疑似クラス セレクターよりも高い優先順位を持つべきではないでしょうか。 ?ここで疑似クラス セレクターの優先順位が高いのはなぜですか?
そして、デバッグ モードをオンにした後、
要素を配置すると、
color: green
のみが有効になり、
div は有効になりませんでした。 :: が見つかりました。最初の行
のスタイル定義:
最後のルールを見つけることができますか? そのようなルールは以下で確認できます:
# が次のとおりであることは明らかです。 ## タグは親要素を継承します よりも高いのかということです。セレクターのほうが低いのです。 。
次のデモは、
スタイルとさまざまなセレクターが連携した場合の優先順位の比較を示しています。 #!重要
This paragraph ... This paragraph color i... This paragraph color is set ... This paragraph color is ....
::first-line## ほど高くないことがわかります。 #。
および
::after
もう 1 つの質問ですが、MDN エラーの例を教えてください。興味深い現象
は、
を意味します。は
結果は次のとおりです:
CodePen デモ -- :not pesudo デモ
https://codepen .io/ Chokcoco/pen/KKZbWjy
:not(p)
これを見たとき、立ち止まって考えてみてください。なぜ
这是由于
我们把它改成一个不可继承的属性,试试看:
OK,这次
因此,实际使用的时候,需要一定要注意样式继承的问题!
以上がCSS の面接での 2 つの質問をチェックして、基礎をテストしてください。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。color: green
を上書きします。
もう一度確認してください
ここで、もう 1 つのわかりにくい点は、なぜ ID セレクターの優先順位が
::first-lineいくつかの簡単な試みをしてみましょう:
ルールが含まれています:
段落 1 はタグ セレクターを介して灰色に設定されます
段落 2 はクラス セレクターを介して灰色に設定されます
3 番目の段落は、ID セレクターによってグレーに設定されます
4 番目の段落は、!重要な bash によってグレーに設定されます
セレクター。 ::first-line vs. tag selector
::first-line vs class selector
::first-line vs ID selector
::first-line vs !important
CodePen デモ -- ::first-line: デモ
https://codepen.io/KittyGiraudel/pen/kWabaa/569e082a67400f5fb39a96030d0e9b6c
::first-line
は実際には疑似クラスではなく疑似要素であり、それによって選択されたコンテンツは実際には子として扱われるためです。要素の要素。処理は
と似ています。したがって、親要素のカラー ルールは ## を介した単なるカスケード関係です。 #: :first-line
独自に定義されたルールの方が優先されます。これが、MDN ドキュメントでは二重コロンの記述方法がより推奨される理由です (もちろん、ブラウザは単一コロンの記述方法をサポートしています) --
MDN -- ::first-行
上記の質問を終えた後。非常によく似た別の質問を見てみましょう。
: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; }
は、
要素の色は
color: blue
のままなのでしょうか? ######どうしてこれなの?答え: ###:not(p)
同样能够选中
,那么
的 color 即变成了
blue
,由于
color
是一个可继承属性,
标签继承了
的 color 属性,导致看到的
也是蓝色。
/* Selects any element that is NOT a paragraph */ :not(p) { border: 1px solid; }
没有边框体现,没有问题!