web-dev-qa-db-ja.com

CSSでは「より大きい」または「>」文字はどのように使用されますか?

この文字はCSSファイルで何度も見ましたが、どのように使用されているのかわかりません。誰も私にそれを説明し、ページスタイルを簡単にするのにそれらがどのように役立つかを示すことができますか?

150
Sam152

CSS子セレクターです。 P > SPANは、Pタグの子であるすべてのSPANタグに続くスタイルを適用することを意味します。

「子」は、単なる子孫ではなく「即時の子孫」を意味することに注意してください。 P SPAN子孫セレクターで、SPANタグの子であるすべてのPタグまたは再帰的に他のタグの子に続くスタイルを適用しますPタグの子/子孫。 P > SPANは、SPANタグの子であるPタグにのみ適用されます。

189
tpdi
p em

<em>内にある<p>と一致します。たとえば、次の<em>sと一致します。

<p><strong><em>foo</em></strong></p>
<p>Text <em>foo</em> bar</p>

一方、

p > em

<em>の直接の子である<p>sのみに一致します。したがって、一致します:

<p>Text <em>foo</em> bar</p>

だがしかし:

<p><strong><em>foo</em></strong></p>
127
Brian Campbell

これは、チャイルドコンビネーターとして知られています。

子コンビネーターセレクターが追加され、他の指定された要素内に含まれる要素のコンテンツのスタイルを設定できるようになりました。たとえば、特定のクラスの背景が暗いため、divタグ内のハイパーリンクの色として白を設定するとします。これは、次のように、ピリオドを使用してdivをクラスリソースと結合し、組み合わせをaと結合するコンビネータとして大なり記号を使用することで実現できます。

div.resources > a{color: white;}

(from http://www.xml.com/pub/a/2003/06/18/css3-selectors.html

8
Adam Alexander
E > F

要素Eの子であるF要素に一致します。

http://www.w3.org/TR/CSS21/selector.html#child-selectors の詳細

4
Tobias