Co oznacza selektor CSS „>” (znak większy niż)?

475

Na przykład:

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

Co dokładnie oznacza >znak?

css css-selectors

— Misza Moroszko
źródło

672

>jest kombinatorem dzieci , czasami mylnie nazywanym kombinatorem bezpośredniego potomka. ¹

Oznacza to, że selektor div > p.some_classwybiera tylko te akapity, .some_classktóre są zagnieżdżone bezpośrednio w a div, a nie żadne akapity, które są zagnieżdżone dalej.

Ilustracja:

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

Co jest wybrane, a co nie:

Wybrane
Znajduje p.some_classsię bezpośrednio wewnątrz div, dlatego między obydwoma elementami nawiązuje się relacja rodzic-dziecko.
Niewybrane
Jest p.some_classto zawarte w blockquoteobrębie div, a nie w divsamym sobie. Chociaż p.some_classjest to potomek div, nie jest to dziecko; to wnuk.

W związku z tym, chociaż div > p.some_classnie będzie pasował do tego elementu, div p.some_classużyje zamiast tego kombinatora potomnego.

¹ _{Wiele osób idzie dalej, nazywając to „bezpośrednim dzieckiem” lub „bezpośrednim dzieckiem”, ale jest to całkowicie niepotrzebne (i niezwykle denerwujące dla mnie), ponieważ element potomny jest z definicji natychmiastowy , więc mają na myśli dokładnie to samo. Nie ma czegoś takiego jak „dziecko pośrednie”.}

— BoltClock
źródło

2

+1 Czy to naprawdę nazywa się selektorem dzieci ? Jeśli tak, jest to dość mylące. Myślałbym, że #something abędzie selektorem dzieci.

— alex

2

@alex: tak :) #something amoże oznaczać, że ajest wnukiem lub wnukiem #something(nie bierze pod uwagę głębokości zagnieżdżenia).

— BoltClock

12

@alex nazywa się kombinatorem potomnym , przestrzeń nazywa się kombinatorem

— potomnym

33

Kiedy ktoś jest dzieckiem dziadka, mamy do czynienia z naprawdę okropnym kazirodztwem. Na szczęście jest to niemożliwe w HTML.

— Quentin

8

Nie słyszę, aby świeccy nazywali swoje dzieci swoimi bezpośrednimi dziećmi dla zachowania przejrzystości.

— BoltClock

41

> (znak większy niż) to kombinator CSS.

Kombinator to coś, co wyjaśnia związek między selektorami.

Selektor CSS może zawierać więcej niż jeden prosty selektor. Pomiędzy prostymi selektorami możemy dołączyć kombinator.

Istnieją cztery różne kombinatory w CSS3:

selektor potomka (spacja)
selektor potomny (>)
sąsiedni selektor rodzeństwa (+)
Ogólny selektor rodzeństwa (~)

Uwaga: < nie działa w selektorach CSS.

Na przykład:

<!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>

Wynik:

Więcej informacji o kombinatorach CSS

— Premraj
źródło

developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/…

— Lalit Yadav

@premraj Dziękujemy za doskonałe wyjaśnienie selektorów css typu rodzic-dziecko!

— YCode

Co to znaczy, kiedy dostajesz coś takiego, po .entry-content > * {"code" }czym następuje .entry-content {"other code" }? Nie .entry-content > *obejmuje wszystkich dzieci entry-content?

— YCode

14

Jak wspominają inni, jest to selektor podrzędny. Oto odpowiedni link.

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

— Dagg Nabbit
źródło

Dziękuję bardzo za link! Odkryłem tam również „sąsiadujące selektory rodzeństwa”.

— Misha Moroshko

Wsparcie przeglądarki znajdziesz w Sitepoint. Nie działa w IE6, jeśli ma to znaczenie dla twoich projektów, OK wszędzie indziej. Ten zasób jest esp. przydatne dla rodzeństwa

— ,:

10

Dopasowuje pelementy z klasą, some_classktóre znajdują się bezpośrednio pod div.

— dan04
źródło

5

Wszystkie pznaczniki z klasą, some_classktóre są bezpośrednimi elementami potomnymi divznacznika.

— tschaible
źródło

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;
}

Wszystkie bezpośrednie dzieci, które są <p>z .some_classtym, zastosują do nich styl.

— suraj rawat
źródło

3

(selektor potomny) został wprowadzony w css2. div p {} zaznacz wszystkie elementy p decedent elementów div, podczas gdy div> p wybiera tylko elementy potomne p, a nie grand child, great grand child itd.

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

Aby uzyskać więcej informacji na temat CSS Ce [lektorów i ich zastosowania, sprawdź mój blog, selektory css i selektory css3

— Avinash Malhotra
źródło

0

Większy selektor znaku (>) w CSS oznacza, że selektor po prawej jest bezpośrednim potomkiem / dzieckiem tego, co jest po lewej.

Przykład:

article > p { }

Oznacza tylko styl akapitu, który pojawia się po artykule.

— autentichigh
źródło