CSS seçicilerinde '>' ile boşluk arasındaki fark nedir?

127

Bu sözdizimini kullanmanın amacı nedir

div.card > div.name

Bunun arasındaki fark nedir

div.card div.name

css css-selectors

— Randy Mayer
kaynak

Bu sorunun yanı sıra, bunun farkında olmadığım ve yaşadığım bir sorunu çözmek için kullanılabileceğim için, hangi tarayıcılar bu tür seçiciyi destekliyor?

— Kyle

3

Mevcut tüm tarayıcılarda desteklenmektedir. IE sürüm 7'de destek aldı: msdn.microsoft.com/en-us/library/…

— Matti Virkkunen

212

A > B yalnızca A'ya alt öğe olan B'yi seçecektir (yani, aralarında başka öğeler yoktur).

A B aralarında başka elemanlar olsa bile, A'nın içindeki herhangi bir B'yi seçecektir.

— Matti Virkkunen
kaynak

11

>olan çocuk seçici. İkinci örnekte olduğu gibi >.

Alt seçici, IE 6 ve altı tarafından desteklenmez. Harika bir uyumluluk tablosu burada .

— Pekka
kaynak

2

div.card > div.nameeşleşiyor <div class='card'>....<div class='name'>xxx</div>...</div> ama uymuyor<div class='card'>....<div class='foo'> ... <div class='name'>xxx</div>..</div>....</div>

div.card div.name ikisiyle de eşleşir.

Yani >seçici, öğenin sağ tarafındaki seçili öğenin sol tarafındaki öğenin hemen >çocuğu olmasını sağlar.

Alt öğesinin (yalnızca alt öğesi değil) alt öğesi olan >herhangi biriyle eşleşmeyen sözdizimi .<div class='name'><div class='card'>

— René Nyffenegger
kaynak

0

A> B, A'nın doğrudan çocukları ise B'yi seçerken AB, B'nin doğrudan çocukları olup olmadığını B'yi seçer.

<p> USING SPACE </p>

<style>
  .a .b {
    background-color: red;
  }
</style>

<span class="a">
  a
  <br>
  <span class="b"> a b</span>
  <br>

  <span class="c">
    <span class="b"> a b c</span>
  </span>
</span>

<br><br>
<p> USING GREATER THAN SIGN</p>

<style>
  .x > .y {
    background-color: red;
  }
</style>

<span class="x">
  x
  <br>
  <span class="y"> x y</span>
  <br>

  <span class="z">
    <span class="y"> x y z</span>
  </span>
</span>

Snippet'i genişlet

— eozten
kaynak

Burada bir kod parçası var. Görebiliyor musun bilmiyorum.

— eozten

Demo güzel ama soruyu yanıtlayan bilgilere gerçekten yardımcı; Zaten diğer üç cevapta bulunan bilgiler. Belki bu soru bugün sorulmuş olsaydı, faydalı olurdu, ama 8 yıldan eski bir soruyu ölümsüzleştireceksen, gerçekten zorlayıcı bir sebep olmalı.

— TylerH

0

> vs Space

İki senaryoyu düşünün div > span { }vsdiv span { }

Burada, başka bir öğenin içinde olsalar bile öğenin <space>tüm <span>öğelerini seçer <div>. >, <div>Öğenin tüm alt öğelerini seçer, ancak bunlar başka bir öğenin içindeyse.

> (Büyüktür):

div > span {
  color: #FFBA00 ;
}

<body>
  <div>

    <p>
      <span>Hello,</span>
    </p>

    <span>World!</span>
  </div>
</body>

Snippet'i genişlet

Bu sadece iç etiketini seçecek <span>World!</span>ve aramayacaktır .<span><p>

Uzay

div span {
  color: #FFBA00 ;
}

<body>
  <div>
    <p>
      <span>Hello,</span>
    </p>

    <span>World!</span>
  </div>
<body>

Snippet'i genişlet

Bu, başka bir etiketin içine yerleştirilmiş olsalar bile tüm span etiketlerini seçer.

— S.Goswami
kaynak