19

これは基本的な質問かもしれませんが、私にとっては、CSSのどこで使用できるの+かまだ混乱しています。>

li > aなどのセレクターがたくさんdiv + spanありますが、違いは何で、いつ使用するのかわかりません。

4

5 に答える 5

37

>記号は、直接の子孫を選択することを意味します

例：

CSS

div > ul {
   list-style: none;
}

HTML ここで、スタイルはに適用されます<ul>

<div>
  <ul>
  </ul>
</div>

+記号は、隣接する兄弟を選択することを意味します

例：

CSS

p + p
{
   font-weight: bold;
}

HTML ここでは、スタイルは後者に適用されます<p>

<div>
   <p></p>
   <p></p>
</div>
于 2012-04-14T17:30:27.913 に答える
6

セレクターはW3CSS仕様で詳細に説明されていますが、ここにダイジェストがあります。

即時子セレクター

>セレクターは直接の子セレクターです。あなたの例li > aでは、ルールは<a>要素の直接の子である任意の要素を選択します<li>。

この例では、ルールはアンカーを選択します。

<ul>
   <li><a href="#">An anchor</a></li>
</ul>

隣接する兄弟セレクター

+セレクターは隣接する兄弟セレクターです。この例div + spanでは、ルールは、<span>要素の直前にある要素を選択<div>し、両方が同じ親を共有します。

この場合、スパン要素が選択されます。

<article>
   <div>A preceding div element</div>
   <span>This span would be selected</span>
</article>
于 2012-04-14T17:31:18.893 に答える
2

は直接の子>セレクターです。の例では、これはの直接の子孫であるタグのみを選択します。li > a<a><li>

選択した要素の+兄弟を意味します。あなたの例では、 （同じ親を持つ）の横にあるdiv + span任意のsを選択します。<span><div>

于 2012-04-14T17:30:52.490 に答える
0

li > aa要素の直接の子孫である要素のみを選択しますli。要素に続く要素div + spanのみを選択します。spandiv

詳細については、@bažmegakapaのリンクをご覧ください：http ：//www.w3.org/TR/CSS2/selector.html#pattern-matching

于 2012-04-14T17:30:42.460 に答える
-1

+記号についてはよくわかりませんが、cssの>記号はの直接の子を意味します。これを考慮してください

div > h1 { color: red; }

これにより、divの直接の子であるすべてのh1タグのスタイルが設定されます。

<h1>BLAH</h1>
<div>
    <h1>BLAH</h1>
</div>

その場合、最初のh1はそのままになり、divタグの直接の子であるため2番目は赤になります。

于 2012-04-14T17:31:41.373 に答える