兄弟セレクタ* + *と*〜*の背後にあるロジックは何ですか？この質問のために

私は次のマークアップ使用しています：Selectors Level 3 specificationから兄弟セレクタ* + *と*〜*の背後にあるロジックは何ですか？この質問のために

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

を次のセレクタルールが適用され、：

*  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. */

False！

* + *と* ~ *は何とか2と3と一緒にパラグラフ1を選択することができます！第1項は、何が付いていないので、アクセスを不可能にする必要があります：

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

結果：あなたが見ることができるように

Result example; paragraph 2 and 3 are red and all paragraphs are italic and underlined

、第1項は、bodyかが付いていませんファントムpですが、明らかに先行しています。カスタムスタイリングはまったく適用されてはいけませんが、最後の2つのセレクターの影響を受けます。これの背後にある論理は何ですか？

JSFiddle example。

出典

2013-05-22 James Donnelly

'*〜body'と' * + body'がありません –

同じ結果 - http://jsfiddle.net/WM4mu/1/ – Michael

私はちょうど '*〜*'が_like_ '*〜 bodyと '* + *'は '* + body'を' body + 'に書くと' 'body''に適用され、bodyは' 'unterline''と' italic'スタイルを持ちます。 –

* + *ドキュメントルートから始まる要素の直下の兄弟であるすべての要素にスタイルを設定します。<head>は実際にはボディの直前の兄弟です（コードには表示されませんが）。最後の2つの段落は、最初の段落が別の兄弟要素の直後ではないためです。 3つのパラグラフはすべて、通常フローのブロックレベルの子孫にあるtext-decorationの性質のために下線が引かれていました。

* ~ *これは関係なく、彼らはすぐに兄弟かじゃないかの<head>後に表示さgeneral sibling combinator ...それスタイル下流の兄弟要素（複数可）を使用することを除いて、基本的には上記と同じものです。 <body>は唯一の兄弟であるため、これは上記のセレクタと同じ効果があります。最初の段落は継承のためイタリック体です。

p ~ *はあなたの例では、最後の二つの段落で<p>次ある兄弟要素を選択します。 p + *は、最後の2つの<p>要素でもある段落の直下の兄弟である要素をスタイルします。

出典

2013-05-22 15:32:07 Adrift

* "私は' '" *の内容を表示していることに注意してください。ブラウザはコンテンツの周りの 'head'タグを削除します。 'body'の中に' head'を置くことはできません。説明はまだ正しいので、+1です。 –

私の前のコメントに追加するだけです。 'Test'の色は' body'の子であるため赤です。あなたのHTMLコードの ''タグは単に無視されます。 –

ああ、もちろん！私はJSFiddleでこれをテストすると、 'head'タグの存在を完全に排除したと思います！ –

これはテストケースのエラーです。あなたが期待するように、セレクタのどれも最初のパラグラフと一致しませんが、bodyカスケードから段落までのスタイリング！

* + *と* ~ *の両方がbodyと一致すると、先にheadタグが付いています。したがって、それはtext-decoration:underlineとfont-style:italicを受け取ります。これは、すべての段落に下線とイタリック体の両方が付いている理由を説明しています。

出典

2013-05-22 15:32:54

*段落は、 'body'のスタイルを継承します。スタイルはある要素から別の要素にカスケードしません。 – BoltClock

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

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

demo

fiddle

彼らは両方の「頭」が先行実際には「身体」の要素に適用されます。

出典

2013-05-22 15:33:42

+1はグラフィックの説明です。 –

兄弟セレクタ* + と〜*の背後にあるロジックは何ですか？この質問のために

答えて

兄弟セレクタ* + *と*〜*の背後にあるロジックは何ですか？この質問のために

答えて

関連する問題

兄弟セレクタ* + と〜*の背後にあるロジックは何ですか？この質問のために