22

この質問では、次のマークアップを使用しています。

<body>
    <p>1</p> <!-- Paragraph 1 -->
    <p>2</p> <!-- Paragraph 2 -->
    <p>3</p> <!-- Paragraph 3 -->
</body>

セレクター レベル 3 仕様から、次のセレクター ルールが適用されます。

*        any element
E + F    an F element immediately preceded by an E element
E ~ F    an F element preceded by an E element

これに基づいて、次のことが発生するはずです。

body + * { } /* Selects nothing as no elements precede body */
body ~ * { } /* As above. */
p + *    { } /* Selects Paragraph 2 and Paragraph 3 as these are preceded by p */
p ~ *    { } /* As above. */
* + *    { } /* As above. */
* ~ *    { } /* As above. */

間違い！

* + *そして* ~ *、どういうわけか段落 1 を 2 と 3 と一緒に選択することができます! 段落 1 の前には何もないため、アクセスできないはずです。

body + * { background: #000; }
body ~ * { background: #000; }
p ~ *    { color: #f00; }
p + *    { font-weight: bold; }
* + *    { text-decoration: underline; }
* ~ *    { font-style: italic; }

結果：

結果の例; 段落 2 と 3 は赤で、すべての段落は斜体で下線が引かれています

ご覧のとおり、段落 1 の前にbodyまたは ファントムpはありませんが、何かが前にあるようです。カスタム スタイルがまったく適用されていないはずですが、最後の 2 つのセレクターの影響を受けています。この背後にあるロジックは何ですか?

JSFiddle の例。

4

3 に答える 3

21

* + *ドキュメント ルートから始まる任意の要素の直接の兄弟である任意の要素をスタイルします -<head>は実際には本文の直前の兄弟であるため (コードでは表示されませんが)、このセレクターは本文と最後の 2 つの段落をターゲットにします。最初の段落が別の兄弟要素の直後に続いていません。text-decoration通常のフローでは、ブロック レベルの子孫の性質上、3 つの段落すべてに下線が引かれています。

* ~ *これは、一般的な兄弟コンビネータを使用することを除いて、基本的に上記と同じことです..<head>直接の兄弟であるかどうかに関係なく、後に現れる下流の兄弟要素をスタイルします。は唯一の兄弟であるため<body>、これは上記のセレクターと同じ効果があります。継承のため、最初の段落はイタリック体になっています。

p ~ *あなたの例では最後の2つの段落に続く兄弟要素を選択します。段落の直接の兄弟であり、最後の 2 つの要素でもある任意の要素をスタイルします。<p>p + *<p>

于 2013-05-22T15:32:07.793 に答える
20

それらは実際には最初の段落には適用されません。これを実証するために、スタイルシートを少し変更してみましょう。

* + *    { border-right: solid red }
* ~ *    { border-left: solid black; }

デモ

フィドル

これらは両方とも、実際には「head」が先行する「body」要素に適用されます。

于 2013-05-22T15:33:42.393 に答える
2

それはあなたのテストケースのエラーです。ご想像のとおり、最初の段落に一致するセレクターはありませんが、カスケードから段落へのスタイリングはbody一致します。

タグが前に付いているため、と の両方* + *に* ~ *一致します。したがって、とを受け取ります。これが、すべての段落に下線が引かれイタリック体になっている理由を説明しています。bodyheadtext-decoration:underlinefont-style:italic

于 2013-05-22T15:32:54.633 に答える