CSS の面接での 2 つの質問をチェックして、基礎をテストしてください。-CSSチュートリアル-php.cn

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

青灯夜游

リリース： 2022-09-28 19:53:55

転載

2081 人が閲覧しました

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

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

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

ログイン後にコピー

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

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

ログイン後にコピー

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

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

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

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

## 1 つ上のレベルに進み、

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

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

もう一度確認してください

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

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

次のデモは、

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

要約すると、各段落を同時に使用します。

セレクター。

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

ログイン後にコピー

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

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

#どのセレクターであっても、優先度は ::first-line## ほど高くないことがわかります。＃。 CSS の面接での 2 つの質問をチェックして、基礎をテストしてください。

その理由は、::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) を意味します。は  タグの要素ではありません。ただし、次の HTML 構造における上記の CSS セレクターの実際の結果は完全に正しくありません。

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

ログイン後にコピー

結果は次のとおりです:

CodePen デモ -- :not pesudo デモ

https://codepen .io/ Chokcoco/pen/KKZbWjy CSS の面接での 2 つの質問をチェックして、基礎をテストしてください。

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

これを見たとき、立ち止まって考えてみてください。なぜ  要素の色は color: blue のままなのでしょうか? ＃＃＃＃＃＃どうしてこれなの？答え：＃＃＃这是由于 :not(p) 同样能够选中 <body>，那么 <body> 的 color 即变成了 blue，由于 color 是一个可继承属性， 标签继承了 <body> 的 color 属性，导致看到的  也是蓝色。

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

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

ログイン後にコピー

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

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

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

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