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

Na przykład: 

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

Co dokładnie oznacza znak >?

Author: BoltClock, 2010-07-12
Source

7 answers

> jest kombinatorem potomnym , czasami błędnie nazywanym kombinatorem potomnym bezpośrednim.1

Oznacza to, że selektor div > p.some_class wybiera tylko akapity .some_class, które są zagnieżdżone bezpośrednio wewnątrz a div, a nie akapity, które są zagnieżdżone dalej wewnątrz.

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:

  1. Wybrane
    Ten p.some_class znajduje się bezpośrednio wewnątrz div, w związku z tym między obydwoma elementami powstaje relacja rodzic-dziecko.

  2. Nie wybrano
    To p.some_class jest zawarte przez blockquote W div, a nie przez div. Chociaż ten p.some_class jest potomkiem div, to nie jest dzieckiem, tylko wnukiem.

    W związku z tym, podczas gdy div > p.some_class nie będzie pasował do tego elementu, div p.some_class użyje zamiast tego kombinatora potomka .

1wielu ludzi idzie następnie można go nazwać " bezpośrednim dzieckiem "lub" bezpośrednim dzieckiem", ale jest to całkowicie niepotrzebne (i niezwykle denerwujące dla mnie), ponieważ dziecko jest z definicji bezpośrednim w każdym razie oznaczają to samo. Nie ma czegoś takiego jak "pośrednie dziecko".

 597
Author: BoltClock,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-10-07 13:01:32

> (greater-than sign) jest kombinatorem CSS.

Kombinator jest czymś, 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 umieścić kombinator.

W CSS3 istnieją cztery różne kombinatory:

  1. selektor potomka (spacja)
  2. selektor dla dzieci ( > )
  3. adjacent sibling selector ( + )
  4. ogólne rodzeństwo selektor (~)

Uwaga: < nie jest poprawna w SELEKTORACH CSS.

Tutaj wpisz opis obrazka

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>

Wyjście:

Tutaj wpisz opis obrazka

Więcej informacji o KOMBINATORACH CSS

 23
Author: Premraj,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-03-07 10:22:16

Jak wspominają inni, jest to selektor dziecięcy. Oto odpowiedni link.

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

 9
Author: Dagg Nabbit,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-07-12 04:37:43

Dopasowuje p elementy z klasą some_class, które są bezpośrednio pod div.

 6
Author: dan04,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-07-12 04:35:18

Wszystkie znaczniki p z klasą some_class, które są bezpośrednimi potomkami znacznika div.

 2
Author: tschaible,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-08 02:05:23

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_class, otrzymałyby styl zastosowany do nich.

 1
Author: suraj rawat,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-08 02:07:08

(child selector) został wprowadzony w css2. div p {} zaznacza wszystkie elementy P powstałe z elementów div, podczas gdy div > p wybiera tylko elementy potomne P, 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 wykorzystania, zajrzyj na mój blog, selektory css i selektory css3

 0
Author: Avinash Malhotra,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-14 17:01:58