Bagaimana karakter "lebih besar dari" atau ">" digunakan dalam CSS?

159

Saya telah melihat karakter ini beberapa kali dalam file CSS tetapi saya tidak tahu bagaimana menggunakannya. Adakah yang bisa menjelaskannya kepada saya dan menunjukkan betapa mereka berguna dalam membuat gaya halaman lebih mudah?

css css-selectors Sam152
sumber
1
Perlu diketahui bahwa ini memerlukan Windows Internet Explorer 7 atau lebih baru. Atau FF atau browser modern. http://msdn.microsoft.com/en-us/library/aa358819(VS.85).aspx
Vili
BTW,> biasanya dikenal sebagai "lebih besar dari" (atau, berbicara salah, sebagai braket sudut kanan).
Richard
1
kemungkinan duplikat Apa artinya pemilih pemilih ">" (lebih dari tanda)?
TZHX

Jawaban:

201

Ini adalah pemilih anak CSS. P > SPANberarti menerapkan gaya yang mengikuti semua tag SPAN yang merupakan anak-anak dari Ptag.

Perhatikan bahwa "anak" berarti "keturunan langsung", bukan sembarang keturunan. P SPANadalah pemilih keturunan , menerapkan gaya yang mengikuti semua SPANtag yang merupakan anak-anak dari Ptag atau anak-anak dari tag lain secara rekursif yang merupakan anak / keturunan dari sebuah Ptag. P > SPANhanya berlaku untuk SPANtag yang merupakan anak-anak dari Ptag.

tpdi
sumber
6
Catatan hati-hati - itu tidak didukung di ie6
wheresrhys
138 
p em

akan cocok dengan apa pun <em>yang ada dalam a <p>. Misalnya, itu akan cocok dengan <em>s berikut :

<p><strong><em>foo</em></strong></p>
<p>Text <em>foo</em> bar</p>

Di samping itu,

p > em

Hanya akan cocok dengan <em>anak-anak langsung dari <p>. Jadi itu akan cocok: 

<p>Text <em>foo</em> bar</p>

Tapi tidak:

<p><strong><em>foo</em></strong></p>
Brian Campbell
sumber
7
Contoh yang bagus dan jelas. walaupun jawaban tpdi sangat membantu, jawaban ini benar-benar membuatnya lebih mudah untuk dipahami.
J. Scott Elblein
8

ini dikenal sebagai Child Combinator:

Pemilih kombinasi anak ditambahkan untuk dapat menata konten elemen yang terkandung dalam elemen tertentu lainnya. Sebagai contoh, misalkan seseorang ingin menetapkan putih sebagai warna hyperlink di dalam tag div untuk kelas tertentu karena mereka memiliki latar belakang gelap. Ini dapat dicapai dengan menggunakan periode untuk menggabungkan div dengan sumber daya kelas dan tanda lebih besar dari sebagai kombinator untuk menggabungkan pasangan dengan, seperti yang ditunjukkan di bawah ini:

div.resources > a{color: white;}

(dari http://www.xml.com/pub/a/2003/06/18/css3-selectors.html )

Adam Alexander
sumber