Co oznacza selektor CSS " > " (większy niż znak)?
Na przykład:
div > p.some_class {
/* Some declarations */
}
Co dokładnie oznacza znak >
?
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:
Wybrane
Tenp.some_class
znajduje się bezpośrednio wewnątrzdiv
, w związku z tym między obydwoma elementami powstaje relacja rodzic-dziecko.-
Nie wybrano
Top.some_class
jest zawarte przezblockquote
Wdiv
, a nie przezdiv
. Chociaż tenp.some_class
jest potomkiemdiv
, 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".
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:
- selektor potomka (spacja)
- selektor dla dzieci ( > )
- adjacent sibling selector ( + )
- ogólne rodzeństwo selektor (~)
Uwaga: <
nie jest poprawna 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>
Wyjście:
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.
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
.
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
.
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.
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
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