Apa perbedaan antara '>' dan spasi di pemilih CSS?

127

Apa gunanya menggunakan sintaks ini

div.card > div.name

Apa bedanya ini

div.card div.name
css css-selectors Randy Mayer
sumber
Lebih jauh ke pertanyaan ini, karena saya tidak menyadarinya dan dapat digunakan untuk menyelesaikan masalah yang saya alami, browser mana yang mendukung jenis pemilih ini?
Kyle
3
Ini didukung di semua browser saat ini. IE mendapat dukungan dalam versi 7: msdn.microsoft.com/en-us/library/…
Matti Virkkunen

Jawaban:

212

A > B hanya akan memilih B yang merupakan anak-anak langsung ke A (yaitu, tidak ada elemen lain di antara).

A B akan memilih B yang ada di dalam A, bahkan jika ada elemen lain di antara mereka.

Matti Virkkunen
sumber
11

>adalah pemilih anak. Ini menetapkan hanya elemen anak langsung dan bukan keturunan apa pun (termasuk cucu, cucu, dll.) Seperti pada contoh kedua tanpa >.

Selector anak tidak didukung oleh IE 6 dan lebih rendah. Tabel kompatibilitas yang bagus ada di sini .

Pekka
sumber
2

div.card > div.namecocok <div class='card'>....<div class='name'>xxx</div>...</div> tetapi tidak cocok<div class='card'>....<div class='foo'> ... <div class='name'>xxx</div>..</div>....</div>

div.card div.name cocok dengan keduanya.

Yaitu, >pemilih memastikan bahwa elemen yang dipilih di sisi kanan >adalah anak immidiate dari elemen di sisi kirinya.

Sintaksis tanpa >cocok dengan apa pun <div class='name'>yang merupakan keturunan (bukan hanya anak) dari <div class='card'>.

René Nyffenegger
sumber
0

A> B memilih B jika itu adalah anak-anak langsung dari A, sedangkan AB memilih B apakah itu adalah anak-anak langsung dari B atau tidak.

<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>
Luaskan cuplikan

eozten
sumber
Ada cuplikan kode di sini. Saya tidak tahu apakah Anda bisa melihatnya.
eozten
Demo ini bagus tetapi benar-benar hanya tambahan untuk informasi yang menjawab pertanyaan; informasi yang sudah ada di tiga jawaban lainnya. Mungkin jika pertanyaan ini diajukan hari ini, itu akan berguna, tetapi jika Anda akan membatalkan pertanyaan berusia> 8 tahun, itu harus benar-benar karena alasan yang meyakinkan.
TylerH
0

> vs Space

Pertimbangkan dua skenario div > span { }vs.div span { }

Di sini, <space>memilih semua semua <span>elemen <div>elemen bahkan jika mereka berada di dalam elemen lain. >> Memilih semua anak <div>elemen tetapi jika mereka berada di dalam elemen lain.

> (Lebih besar dari):

div > span {
  color: #FFBA00 ;
}
<body>
  <div>

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

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

Yang ini hanya memilih <span>World!</span>dan tidak akan mencari tag <span>di dalamnya <p>.

Ruang

div span {
  color: #FFBA00 ;
}
<body>
  <div>
    <p>
      <span>Hello,</span>
    </p>

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

Yang ini memilih semua tag rentang, bahkan jika mereka bersarang di dalam tag lain.

S.Goswami
sumber