回答:
>
は子コンビネータです。誤って直接子孫コンビネータと呼ばれることもあります。1
つまり、セレクタは、内に直接ネストされているdiv > p.some_class
段落のみを選択し、さらに.some_class
ネストされている段落は選択しません。div
イラスト:
<div>
<p class="some_class">Some text here</p> <!-- Selected [1] -->
<blockquote>
<p class="some_class">More text here</p> <!-- Not selected [2] -->
</blockquote>
</div>
何を選択し、何を選択しないか:
選択済み
これp.some_class
はの内部に直接配置されているdiv
ため、両方の要素間に親子関係が確立されます。
選択されていません
これp.some_class
は、それ自体ではなく、blockquote
内に含まれています。これはの子孫ですが、子供ではありません。それは孫です。div
div
p.some_class
div
その結果、div > p.some_class
この要素にdiv p.some_class
は一致しませんが、代わりに子孫コンビネーターを使用します。
1 多くの人々はそれを「直接の子」または「直接の子」と呼んでいますが、子要素は定義により即時であるため、まったく同じことです。「間接的な子」のようなものはありません。
>
(より大きい記号)はCSS Combinatorです。
コンビネータは、セレクタ間の関係を説明するものです。
CSSセレクターには、複数の単純なセレクターを含めることができます。単純なセレクターの間に、コンビネーターを含めることができます。
CSS3には4つの異なるコンビネーターがあります。
注: <
CSSセレクターでは無効です。
例えば:
<!DOCTYPE html>
<html>
<head>
<style>
div > p {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
<span><p>Paragraph 3 in the div.</p></span> <!-- not Child but Descendant -->
</div>
<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>
</body>
</html>
出力:
.entry-content > * {"code" }
が続くようなものを得たときそれはどういう意味.entry-content {"other code" }
ですか?の.entry-content > *
すべての子をカバーしていませんentry-content
か?
<div>
<p class="some_class">lohrem text (it will be of red color )</p>
<div>
<p class="some_class">lohrem text (it will NOT be of red color)</p>
</div>
<p class="some_class">lohrem text (it will be of red color )</p>
</div>
CSS
div > p.some_class{
color:red;
}
<p>
一緒にいる直接の子はすべて、.some_class
スタイルが適用されます。
(子セレクター)はcss2で導入されました。div p {}は、div要素の子孫であるすべてのp要素を選択しますが、div> pは、子p要素のみを選択し、孫、偉大な孫などは選択しません。
<style>
div p{ color:red } /* match both p*/
div > p{ color:blue } /* match only first p*/
</style>
<div>
<p>para tag, child and decedent of p.</p>
<ul>
<li>
<p>para inside list. </p>
</li>
</ul>
</div>
CSS Ce [lectorsとその使用法の詳細については、私のブログ、cssセレクター、css3セレクターを確認してください
#something a
子供セレクターになると思います。