Pemilih CSS Child vs Descendant

298

Saya agak bingung antara 2 penyeleksi ini.

Apakah pemilih turunan :

div p

pilih semua pdalam satu divatau tidak itu merupakan keturunan langsung? Jadi jika pada di dalam yang lain divmasih akan dipilih?

Kemudian pemilih anak :

div > p

Apa bedanya? Apakah seorang anak berarti anak langsung ? Misalnya.

<div><p>

vs.

<div><div><p>

apakah keduanya akan dipilih, atau tidak?

css css-selectors iceangel89
sumber
Saya sudah mencoba menjelaskan di sini secara rinci, dapat merujuk hanya jika itu bermanfaat bagi siapa pun ...
Tn. Alien

Jawaban:

468

Coba pikirkan apa arti kata "child" dan "descendant" dalam bahasa Inggris:

  • Anak perempuan saya adalah anak dan keturunan saya
  • Cucu perempuan saya bukan anak saya, tetapi dia adalah keturunan saya.
RichieHindle
sumber
49
Satu catatan penting adalah bahwa pemilih anak akan lebih cepat daripada pemilih keturunan, yang dapat memiliki pengaruh yang terlihat pada halaman dengan 1000-an elemen DOM.
Jake Wilson
Jawaban yang bagus, tetapi saya hanya menambahkan jawaban langsung pada contoh-contohnya dalam pertanyaan juga - hanya untuk membuatnya jelas sekali.
JoeCool
45

Ya kamu benar. div pakan cocok dengan contoh berikut, tetapi div > ptidak akan.

<div><table><tr><td><p> <!...

Yang pertama disebut pemilih keturunan dan yang kedua disebut pemilih anak .

Çağdaş Tekin
sumber
23

Pada dasarnya, " ab " memilih semua b di dalam a, sementara " a> b " memilih b yang hanya anak-anak dari a , itu tidak akan memilih b apa anak dari b apa anak dari a .

Contoh ini menggambarkan perbedaan:

div span{background:red}
div>span{background:green}

<div><span>abc</span><span>def<span>ghi</span></span></div>

Warna latar belakang abc dan def akan berwarna hijau, tetapi ghi akan memiliki warna latar belakang merah.

PENTING: Jika Anda mengubah urutan aturan menjadi:

div>span{background:green}
div span{background:red}

Semua huruf akan memiliki latar belakang merah, karena pemilih keturunan memilih anak juga.

Ignas2526
sumber
Bagian "Penting" yang Anda tambahkan menjadikan jawaban ini lengkap. Terima kasih!
Aakash Verma
10

Secara teori: Anak => keturunan langsung leluhur (mis. Joe dan ayahnya)

Keturunan => elemen apa pun yang diturunkan dari leluhur tertentu (mis. Joe dan buyutnya)

Dalam praktiknya: coba HTML ini:

<div class="one">
  <span>Span 1.
    <span>Span 2.</span>
  </span>
</div>

<div class="two">
  <span>Span 1.
    <span>Span 2.</span>
  </span>
</div>

dengan CSS ini:

span { color: red; } 
div.one span { color: blue; } 
div.two > span { color: green; }

http://jsfiddle.net/X343c/1/

Snowcrash
sumber
Menarik di browser mana Anda mengujinya, karena tampaknya memang berfungsi
yoel halb
3
FYI, CSS sebagai jawaban tidak cocok dengan CSS di JSFiddle ( reddan blueditukar).
Pang
7

Ketahuilah bahwa pemilih anak tidak didukung di Internet Explorer 6. (Jika Anda menggunakan pemilih dalam pemilih jQuery / Prototype / YUI dll daripada dalam style sheet, ia tetap berfungsi)

rlovtang
sumber
Saya pikir saya menggunakannya dalam css. tapi di jquery saya mendeteksi jika browser IE6 (di jquery bisa saya melakukan ini atau apakah saya perlu menggunakan? <! - [if IE 6]>) dan menambahkan kelas
iceangel89
2
jquery melakukan fitur sniffing daripada sniffing browser jadi saya tidak berpikir Anda dapat mendeteksi apakah browser adalah IE6. Dan seharusnya tidak. Yang terbaik adalah memasukkan style sheet tambahan untuk ie6 dengan komentar bersyarat seperti yang Anda jelaskan.
rlovtang
4 
div p

Memilih semua elemen 'p' di mana induknya adalah elemen 'div'

div> p

Ini berarti anak-anak langsung Memilih semua elemen 'p' di mana orang tua adalah elemen 'div'

pengguna3351229
sumber
-1

Pemilihan dan penerapan gaya CSS untuk elemen tertentu dapat dilakukan melalui melintasi elemen dom [Contoh

Contoh

.a .b .c .d{
    background: #bdbdbd;
}
div>div>div>div:last-child{
    background: red;
}

<div class='a'>The first paragraph.
 <div class='b'>The second paragraph.
  <div class='c'>The third paragraph.
   <div class='d'>The fourth paragraph.</div>
   <div class='e'>The fourth paragraph.</div>
  </div>
 </div>
</div>
Aravind Cheekkallur
sumber