[解決済み] CSS '>' セレクタ; それは何ですか？重複

質問

私は、"greater than"を見たことがあります( > がCSSのコードで何度か使われていますが、これが何をするものなのかがわかりません。これは何をするものなのでしょうか？

どのように解決するのですか？

> 直下の子を選択

例えば、このようなdivを入れ子にしている場合。

<div class='outer'>
    <div class="middle">
        <div class="inner">...</div>
    </div>
    <div class="middle">
        <div class="inner">...</div>
    </div>
</div>

というように、スタイルシートでCSSルールを宣言します。

.outer > div {
    ...
}

というのも、これらの div はクラス "outer" を持つ要素の直接の子孫（直系の子）だからです（もちろん、これらの規則を上書きする、より具体的な他の規則を宣言していない限り）。fiddle を参照してください。

div {
  border: 1px solid black;
  padding: 10px;
}
.outer > div {
  border: 1px solid orange;
}

<div class='outer'>
  div.outer - This is the parent.
  <div class="middle">
    div.middle - This is an immediate child of "outer". This will receive the orange border.
    <div class="inner">div.inner - This is an immediate child of "middle". This will not receive the orange border.</div>
  </div>
  <div class="middle">
    div.middle - This is an immediate child of "outer". This will receive the orange border.
    <div class="inner">div.inner - This is an immediate child of "middle". This will not receive the orange border.</div>
  </div>
</div>

<p>Without Words</p>

<div class='outer'>
  <div class="middle">
    <div class="inner">...</div>
  </div>
  <div class="middle">
    <div class="inner">...</div>
  </div>
</div>

サイドメニュー

代わりに、スペースがあった場合 の代わりに、セレクタの間に > の場合、あなたのルールはネストされた両方の div に適用されます。スペースはより一般的に使用されており、quot;子孫セレクタを定義しています。 > のようになります。

注 > セレクタはIE6ではサポートされていません。しかし、IE7 や IE8 を含む、他のすべての現行ブラウザでは動作します。

あまり使われていないCSSセレクタを調べている場合は、次のようなものもあります。 + , ~ および [attr] セレクタがあり、これらはすべて非常に便利です。

このページ は、利用可能なすべてのセレクタの完全なリストと、さまざまなブラウザでのサポートの詳細 (主に IE で問題が発生します)、およびその使用例について説明しています。