Chcę zastosować style tylko do tabeli wewnątrz DIV z określoną klasą:
Uwaga: wolę użyć selektora css dla elementów potomnych.
Dlaczego nr 1 działa, a nr 2 nie?
1:
div.test th, div.test td, div.test caption {padding:40px 100px 40px 50px;}
2:
div.test th, td, caption {padding:40px 100px 40px 50px;}
HTML:
<html>
<head>
<style>
div.test > th, td, caption {padding:40px 100px 40px 50px;}
</style>
</head>
<body>
<div>
<table border="2">
<tr><td>some</td></tr>
<tr><td>data</td></tr>
<tr><td>here</td></tr>
</table>
</div>
<div class="test">
<table border="2">
<tr><td>some</td></tr>
<tr><td>data</td></tr>
<tr><td>here</td></tr>
</table>
</div>
</body>
</html>
Co ja robię źle?
css
css-selectors
Roman m
źródło
źródło
Odpowiedzi:
Ten kod „
div.test th, td, caption {padding:40px 100px 40px 50px;}
” stosuje regułę do wszystkichth
elementów zawartych wdiv
elemencie o nazwie klasytest
, oprócz wszystkichtd
elementów i wszystkichcaption
elementów.To nie to samo, co „wszyscy
td
,th
acaption
elementy, które są zawarte wdiv
elemencie z klasątest
”. Aby to osiągnąć, musisz zmienić selektory:'
>
' nie jest w pełni obsługiwany przez niektóre starsze przeglądarki (patrzę na ciebie, Internet Explorer).źródło
źródło
.test *
byłaby to najbardziej szczegółowa reguła dla każdego elementu potomnego. Innymi słowy, pamiętaj, że cokolwiek umieścisz w środku,.test *
nie może zostać zastąpione żadną bardziej szczegółową regułą css, ponieważtest *
jest to najbardziej szczegółowa reguła.>
Selektor pasuje tylko bezpośrednie dzieci, nie potomnych.Chcesz
lub bardziej prawdopodobne
Edytować:
Pierwszy mówi
Podczas gdy drugi mówi
W oryginale
div.test > th
napisanoany <th> which is a **direct** child of <div class="test">
, co oznacza, że będzie pasować,<div class="test"><th>this</th></div>
ale nie będzie pasować<div class="test"><table><th>this</th></table></div>
źródło
Jeśli chcesz dodać styl we wszystkich elementach podrzędnych i bez specyfikacji znacznika HTML, użyj go.
Tag nadrzędny
div.parent
tag dziecko wewnątrz div.parent jak
<a>
,<input>
,<label>
itd.kod :
div.parent * {color: #045123!important;}
Możesz także usunąć ważne, to nie jest wymagane
źródło
Oto kod, który niedawno napisałem. Myślę, że zapewnia podstawowe wyjaśnienie łączenia nazw klas / identyfikatorów z pseudoklasami.
źródło
//
. Zobacz stackoverflow.com/questions/4656546/…pracuje dla mnie.
Selektor potomny> nie działa w IE6.
źródło
O ile wiem to:
lub w twoim przypadku nawet to:
(ale to zadziała dla elementów,
yourclass
które mogą nie byćdiv
s) wpłynie tylko na tabele wewnątrzyourclass
. I, jak mówi Ken,> nie jest obsługiwane wszędzie (idiv[class=yourclass]
też, więc używaj notacji punktowej dla klas).źródło
Ten kod może również załatwić sprawę, używając składni SCSS
źródło