“>” (İşaretten büyük) CSS seçici ne anlama geliyor?

476

Örneğin:

div > p.some_class {
  /* Some declarations */
}

>İşaret tam olarak ne anlama geliyor?

css css-selectors

— Misha Moroshko
kaynak

673

>olan çocuk combinator bazen yanlışlıkla doğrudan soyundan combinator denir. ¹

Bunun anlamı seçici div > p.some_classsadece paragraflar seçer .some_classiçe olduğu bizzat içinde yer bir divdeğil, içinde daha iç içe olan herhangi paragraflar.

Bir örnek:

<div>
    <p class="some_class">Some text here</p>     <!-- Selected [1] -->
    <blockquote>
        <p class="some_class">More text here</p> <!-- Not selected [2] -->
    </blockquote>
</div>

Seçilenler ve olmayanlar:

Seçili
Bu p.some_classdoğrudan içinde bulunur div, bu nedenle her iki eleman arasında bir ebeveyn-çocuk ilişkisi kurulur.
Seçili değil
Bu p.some_classbir tarafından bulunan blockquotedahilinde divziyade, divkendisi. Bu p.some_classbir torun olmasına rağmen div, bir çocuk değil; Bu bir torun.

Sonuç olarak, div > p.some_classbu öğeyle eşleşmeyecek olsa div p.some_classda, onun yerine torun birleştiricisini kullanacaktır .

¹ _{Birçok kişi buna "doğrudan çocuk" veya "acil çocuk" adını vermek için daha da ileri gider, ancak bu tamamen gereksizdir (ve benim için inanılmaz derecede can sıkıcıdır), çünkü bir alt öğe zaten tanım gereği derhal aynıdır, bu yüzden aynı şey anlamına gelir. "Dolaylı çocuk" diye bir şey yoktur.}

— BoltClock
kaynak

2

+1 Gerçekten çocuk seçici mi deniyor ? Eğer öyleyse, bu oldukça yanıltıcıdır. Ben düşünce olurdu #something abir çocuk seçici olacaktır.

— alex

2

@alex: yes :) bir torun ya da büyük bir ^ n torunu #something aanlamına gelebilir (yuvalama derinliğini dikkate almaz). a#something

— BoltClock

12

@alex buna çocuk birleştirici denir, alana inen birleştirici

— robertc

33

Birisi büyükbabasının çocuğu olduğunda, gerçekten kötü bir ensest örneği ile uğraşıyoruz. Ne mutlu ki, bu HTML'de imkansız.

— Quentin

8

Netlik uğruna çocuklarını doğrudan çocukları olarak adlandıran hiçbir meslekten kimse duymuyorum.

— BoltClock

41

> (büyüktür işareti) bir CSS Birleştiricisi'dir.

Bir birleştirici, seçiciler arasındaki ilişkiyi açıklayan bir şeydir.

Bir CSS seçici birden fazla basit seçici içerebilir. Basit seçiciler arasında bir birleştirici ekleyebiliriz.

CSS3'te dört farklı birleştirici vardır:

soy seçicisi (boşluk)
çocuk seçici (>)
bitişik kardeş seçici (+)
genel kardeş seçici (~)

Not: < CSS seçicilerinde geçerli değildir.

Örneğin:

<!DOCTYPE html>
<html>
<head>
<style>
div > p {
    background-color: yellow;
}
</style>
</head>
<body>

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
  <span><p>Paragraph 3 in the div.</p></span> <!-- not Child but Descendant -->
</div>

<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>

</body>
</html>

Çıktı:

CSS Kombinatörleri hakkında daha fazla bilgi

— Premraj
kaynak

developer.mozilla.org/tr-TR/docs/Learn/CSS/Introduction_to_CSS/…

— Lalit Yadav

@premraj Ebeveyn-çocuk css seçicilerinin mükemmel açıklaması için teşekkür ederiz!

— YCode

Peki bunu .entry-content > * {"code" }izleyen bir şey elde etmek ne anlama geliyor .entry-content {"other code" }? .entry-content > *Tüm çocuklarını kapsamıyor mu entry-content?

— YCode

14

Diğerlerinin de belirttiği gibi, bu bir çocuk seçici. İşte uygun bağlantı.

http://www.w3.org/TR/CSS2/selector.html#child-selectors

— Dagg Nabbit
kaynak

Bağlantı için çok teşekkür ederim ! Orada "Bitişik kardeş seçicileri" de keşfettim.

— Misha Moroshko

Sitepoint'de tarayıcı desteği bulacaksınız . Projeleriniz için önemliyse IE6'da çalışmaz, başka her yerde tamam. Bu kaynak esp. kardeşler için yararlı, nth-child () vb. destek hala eksik

— FelipeAls

10

Bu maçları psınıfla unsurları some_classolan doğrudan a altında div.

— dan04
kaynak

5

Bir etiketin doğrudan alt pöğesi olan sınıf some_classiçeren tüm etiketler div.

— tschaible
kaynak

4

html

<div>
    <p class="some_class">lohrem text (it will be of red color )</p>    
    <div>
        <p class="some_class">lohrem text (it will  NOT be of red color)</p> 
    </div>
    <p class="some_class">lohrem text (it will be  of red color )</p>
</div>

css

div > p.some_class{
    color:red;
}

Olan bütün direkt çocukları <p>ile .some_classbunlara uygulanan stil tanınacak.

— suraj çiğneme
kaynak

3

(çocuk seçici) css2'de tanıtıldı. div p {} div öğelerinden kalan tüm p öğelerini seçerken, div> p yalnızca büyük çocuk değil, büyük büyük çocuk gibi alt çocuk öğelerini seçer.

<style>
  div p{  color:red  }       /* match both p*/
  div > p{  color:blue  }    /* match only first p*/

</style>

<div>
   <p>para tag, child and decedent of p.</p>
   <ul>
       <li>
            <p>para inside list. </p>
       </li>
   </ul>
</div>

CSS Ce [seçicileri ve kullanımları hakkında daha fazla bilgi için blogumu, css seçicileri ve css3 seçicileri kontrol edin

— Avinash Malhotra
kaynak

0

CSS'deki daha büyük işaret (>) seçici sağdaki seçicinin soldaki her şeyin doğrudan soyundan / çocuğu olduğu anlamına gelir.

Bir örnek:

article > p { }

Yalnızca bir makaleden sonra gelen paragrafı ifade eder.

— authentichigh
kaynak