Jaki jest sens używania tej składni
div.card > div.name
Jaka jest różnica między tym
div.card div.name
Jaki jest sens używania tej składni
div.card > div.name
Jaka jest różnica między tym
div.card div.name
Odpowiedzi:
A > B
wybierze tylko B, które są bezpośrednimi potomkami A (to znaczy nie ma między nimi żadnych innych elementów).
A B
wybierze dowolne B znajdujące się wewnątrz A, nawet jeśli między nimi są inne elementy.
>
jest selektorem podrzędnym. Określa tylko bezpośrednie elementy podrzędne, a nie żadnych elementów podrzędnych (w tym wnuki, wnuki itp.), Jak w drugim przykładzie bez rozszerzenia >
.
Selektor dziecka nie jest obsługiwany przez IE 6 i starsze. Świetna tabela kompatybilności jest tutaj .
div.card > div.name
pasuje, <div class='card'>....<div class='name'>xxx</div>...</div>
ale nie pasuje<div class='card'>....<div class='foo'> ... <div class='name'>xxx</div>..</div>....</div>
div.card div.name
pasuje do obu.
Oznacza to, że >
selektor zapewnia, że wybrany element po prawej stronie >
jest natychmiastowym dzieckiem elementu po jego lewej stronie.
Składnia bez >
dopasowań, <div class='name'>
która jest potomkiem (nie tylko dzieckiem) <div class='card'>
.
A> B wybiera B, jeśli jest to bezpośrednie dziecko A, podczas gdy AB wybiera B, czy jest to bezpośrednie dziecko B, czy nie.
<p> USING SPACE </p>
<style>
.a .b {
background-color: red;
}
</style>
<span class="a">
a
<br>
<span class="b"> a b</span>
<br>
<span class="c">
<span class="b"> a b c</span>
</span>
</span>
<br><br>
<p> USING GREATER THAN SIGN</p>
<style>
.x > .y {
background-color: red;
}
</style>
<span class="x">
x
<br>
<span class="y"> x y</span>
<br>
<span class="z">
<span class="y"> x y z</span>
</span>
</span>
Rozważ dwa scenariusze div > span { }
vs.div span { }
Tutaj <space>
wybiera wszystkie <span>
elementy <div>
elementu, nawet jeśli znajdują się one wewnątrz innego elementu. > Wybiera wszystkie elementy podrzędne <div>
elementu, ale jeśli znajdują się one wewnątrz innego elementu.
div > span {
color: #FFBA00 ;
}
<body>
<div>
<p>
<span>Hello,</span>
</p>
<span>World!</span>
</div>
</body>
Ten po prostu wybiera tag <span>World!</span>
i nie będzie szukał <span>
wewnętrznego <p>
tagu.
div span {
color: #FFBA00 ;
}
<body>
<div>
<p>
<span>Hello,</span>
</p>
<span>World!</span>
</div>
<body>
Ten wybiera wszystkie tagi span, nawet jeśli są zagnieżdżone w innym tagu.