1
Możliwy duplikat:
co oznacza " > " w regułach CSS?
Widziałem "większe niż "(>) używane w kodzie CSS kilka razy, ale nie mogę rozgryźć, co to robi. Co to robi?
7 answers
> wybiera najbliższe dzieci
Na przykład, jeśli masz zagnieżdżone divy w taki sposób:
<div class='outer'>
<div class="middle">
<div class="inner">...</div>
</div>
<div class="middle">
<div class="inner">...</div>
</div>
</div>
I deklarujesz regułę css w swoim arkuszu stylów w taki sposób:
.outer > div {
...
}
Twoje zasady będą miały zastosowanie tylko do tych div, które mają klasę "middle", ponieważ te div są bezpośrednimi potomkami (bezpośrednimi dziećmi) elementów z klasą "outer" (chyba, że zadeklarujesz inne, bardziej szczegółowe zasady nadrzędne). Zobacz też fiddle.
div {
border: 1px solid black;
padding: 10px;
}
.outer > div {
border: 1px solid orange;
}<div class='outer'>
div.outer - This is the parent.
<div class="middle">
div.middle - This is an immediate child of "outer". This will receive the orange border.
<div class="inner">div.inner - This is an immediate child of "middle". This will not receive the orange border.</div>
</div>
<div class="middle">
div.middle - This is an immediate child of "outer". This will receive the orange border.
<div class="inner">div.inner - This is an immediate child of "middle". This will not receive the orange border.</div>
</div>
</div>
<p>Without Words</p>
<div class='outer'>
<div class="middle">
<div class="inner">...</div>
</div>
<div class="middle">
<div class="inner">...</div>
</div>
</div>Side note
Gdybyś zamiast tego miał spację pomiędzy selektorami zamiast >, TWOJE REGUŁY będą miały zastosowanie do obu zagnieżdżonych div. Spacja jest znacznie częściej używana i definiuje "selektor potomków", co oznacza, że szuka dowolnego pasującego elementu w drzewie, a nie tylko bezpośrednich dzieci, jak robi to >.
Uwaga: selektor > nie jest obsługiwany przez IE6. Działa we wszystkich innych prądach przeglądarki, w tym IE7 i IE8.
Jeśli szukasz mniej dobrze używanych selektorów CSS, możesz również zajrzeć do +, ~, i [attr] selektory, z których wszystkie mogą być bardzo przydatne.
Ta strona zawiera pełną listę wszystkich dostępnych selektorów, wraz ze szczegółami ich obsługi w różnych przeglądarkach (głównie IE, który ma problemy) oraz dobrymi przykładami ich użycia.
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-20 19:43:54
> wybiera wszystkich bezpośrednich potomków / dzieci
A spacja selektor wybierze wszystkie Głębokie potomstwo, podczas gdy selektor większy niż > wybierze tylko wszystkie bezpośrednie potomstwo. Zobacz na przykład fiddle.
div { border: 1px solid black; margin-bottom: 10px; }
.a b { color: red; } /* every John is red */
.b > b { color: blue; } /* Only John 3 and John 4 are blue */<div class="a">
<p><b>John 1</b></p>
<p><b>John 2</b></p>
<b>John 3</b>
<b>John 4</b>
</div>
<div class="b">
<p><b>John 1</b></p>
<p><b>John 2</b></p>
<b>John 3</b>
<b>John 4</b>
</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-20 20:58:23
Jest to selektor potomny CSS. Przykład:
div > p zaznacza wszystkie akapity, które są bezpośrednimi dziećmi div.
Zobacz to
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-12-16 10:41:48
Jak mówili inni, jest to bezpośrednie dziecko, ale warto zauważyć, że różni się to od samego pozostawienia przestrzeni... przestrzeń jest dla każdego potomka.
<div>
<span>Some text</span>
</div>
div>span pasuje do tego, ale Nie pasuje do tego:
<div>
<p><span>Some text</span></p>
</div>
Aby to dopasować, możesz zrobić div>p>span lub div span.
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-12-16 11:44:00
To Selektor Dla Dzieci.
Pasuje, gdy element jest potomkiem jakiegoś elementu. Składa się z dwóch lub więcej selektorów oddzielonych ">".
Przykład(y):
Następująca reguła określa styl wszystkich elementów P, które są dziećmi ciała:
body > P { line-height: 1.3 }
Przykład(y):
Poniższy przykład łączy selektory potomków i selektory Potomków:
div ol>li p
Pasuje do elementu P, który jest potomkiem LI; element LI musi być potomkiem OL element; element OL musi być potomkiem DIV. Zauważ, że opcjonalna Biała spacja wokół kombinatora " > " została pominięta.
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-12-16 10:50:13
Deklaruje odniesienie do rodzica, spójrz na tę stronę dla definicji:
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
2013-09-10 07:17:37
To znaczy rodzic / dziecko
Przykład:
Html > body
To znaczy, że ciało jest dzieckiem html
Zobacz: selektory
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
2013-01-24 06:24:12