Mam kod HTML, który miałby elementy z wieloma klasami i muszę przypisać je w ramach jednej reguły, aby te same klasy mogły być różne w różnych kontenerach. Powiedz, że mam to w moim CSS:
.border-blue {
border: 1px solid blue;
}
.background {
background: url(bg.gif);
}
Następnie mam to w moim HTML:
<div class='border-blue background'>Lorum Crap No-one Cares About Ipsum</div>
Czy mogę kierować na te reklamy w ramach jednej reguły? Na przykład tak, o czym wiem, że nie działa:
.border-blue, .background {
border: 1px solid blue;
background: url(bg.gif);
}
.border-blue .background { ... }
to dziecko? próbowałem tego i to nie działaNa wypadek, gdyby ktoś natknął się na to tak jak ja i nie zdawał sobie sprawy, dwie powyższe odmiany są przeznaczone do różnych przypadków użycia.
Następujące:
jest używany, gdy chcesz dodać style do elementów, które mają klasę niebieskiej ramki lub tła, na przykład:
wszystkie otrzymałyby niebieskie obramowanie i białe tło.
Jednak przyjęta odpowiedź jest inna.
Stosuje to style do elementów, które mają obie klasy, więc w tym przykładzie tylko te
<div>
z obiema klasami powinny otrzymać style (w przeglądarkach, które poprawnie interpretują CSS):Więc zasadniczo pomyśl o tym w ten sposób, oddzielanie przecinkami stosuje się do elementów z jedną klasą LUB inną klasą, a oddzielanie kropkami dotyczy elementów z jedną klasą ORAZ inną klasą .
źródło
.blue-border.background
think of it as AND and OR
: Dobra rada. Dodam, że.x .y
można to potraktować jakoy && ancestors.has(x)