Oto przykład, którego nie rozumiem:
.container_12 .grid_6,
.container_16 .grid_8 {
width: 460px;
}
Wydaje mi się, że width: 460px
dotyczy to wszystkich wyżej wymienionych klas. Ale dlaczego niektóre klasy są oddzielone przecinkiem ( ,
), a niektóre po prostu spacją?
Zakładam, że width: 460px
zostanie to zastosowane tylko do tych elementów, które łączą klasy w sposób opisany w pliku CSS. Na przykład zostanie zastosowany, <div class='container_12 grid_6'>
ale nie zostanie zastosowany do <div class='container_12'>
. Czy to założenie jest słuszne?
css
css-selectors
rzymski
źródło
źródło
Odpowiedzi:
.container_12 .grid_6, .container_16 .grid_8 { width: 460px; }
To mówi „zrób wszystkie .grid_6 w .container_12, a wszystkie .grid_8 w .container_16 o szerokości 460 pikseli”. Więc oba poniższe będą renderować to samo:
<div class="container_12"> <div class="grid_6">460px Wide</div> </div> <div class="container_16"> <div class="grid_8">460px Wide</div> </div>
Jeśli chodzi o przecinki, stosuje jedną regułę do wielu klas, tak jak to.
.blueCheese, .blueBike { color:blue; }
Jest funkcjonalnie równoważne z:
.blueCheese { color:blue } .blueBike { color:blue }
Ale ogranicza gadatliwość.
źródło
.container_12 .grid_6
to tylko.grid_6
elementów znalezionych w ramach.container_12
przedmiotów..container_12 .grid_6 { ... }
Ta reguła dopasowuje węzeł DOM z klasą,
container_12
która ma potomka (niekoniecznie dziecko) z klasągrid_6
i stosuje reguły CSS do elementu DOM z klasągrid_6
..container_12 > .grid_6 { ... }
Umieszczenie
>
między nimi mówi, żegrid_6
węzeł musi być bezpośrednim dzieckiem węzła z klasącontainer_12
..container_12, .grid_6 { ... }
Przecinek, jak powiedzieli inni, jest sposobem na zastosowanie reguł do wielu różnych węzłów jednocześnie. W takim przypadku reguły dotyczą dowolnego węzła z klasą
container_12
lubgrid_6
.źródło
<space>
i>
między klasami / IDS.Nie dokładnie to, o co pytano, ale może to pomoże.
Aby zastosować styl do elementu tylko wtedy, gdy ma on obie klasy, selektor nie powinien używać spacji między nazwami klas.
Na przykład:
.class1.class2 { color: #f00; } .class1 .class2 { color: #0f0; } .class1, .class2 { font-weight: bold; }
<div class='class1 class2'>Bold Red Text</div> <div class='class1'>Bold Text (not red)</div> <div class='class1'><div class='class2'>Bold Green Text</div></div>
źródło
Przecinek grupuje klasy (stosuje ten sam styl do nich wszystkich), puste miejsce oznacza, że następujący selektor musi znajdować się w pierwszym selektorze.
W związku z tym
.container_12 .grid_6, .container_16 .grid_8 { width: 460px; }
stosuje ten styl tylko do klasy,
.grid_6
która jest w.container_12
klasie i do.grid_8
klasy, która jest w niej.container_16
.źródło
width: 460px;
Będą stosowane do elementu z.grid_8
grupy, zawarte wewnątrz elementów z.container_16
klasy i elementów z.grid_6
grupy, zawarte wewnątrz elementów o.container_12
.Przestrzeń oznacza dziedzictwo, a przecinek oznacza „i”. Jeśli umieścisz właściwości za pomocą selektora, takiego jak
.class-a, .class-b
, właściwości zostaną zastosowane do elementów z dowolną z dwóch klas.Mam nadzieję, że pomogłem.
źródło
W swoim przykładzie masz cztery klasy i dwa selektory:
.container_12 .grid_6, .container_16 .grid_8 { width: 460px; }
Tak
.container_12
i.grid_6
obie są klasami, ale reguławidth: 460px
będzie stosowana tylko do elementów, które mają.grid_6
klasę, która jest potomkiem elementu, który ma tę.container_16
klasę.Na przykład:
<div class="container_16"> <p class=".grid_6">This has a width of 480px.</p> <p>This has an unknown width.</p> </div>
źródło
Powyższe oznacza, że stosujesz style do dwóch klas, oznaczonych przecinkiem.
Kiedy widzisz dwa elementy obok siebie, nierozdzielone, możesz założyć, że odnosi się do obszaru w obrębie obszaru. Tak więc w powyższym stylu ten styl ma zastosowanie tylko do klas grid_6 w klasach container_12 i klas grid_8 wewnątrz klas container_16.
w przykładzie:
<div class="grid_6">This is not effected</div> <div class="container_12"> <div class="grid_6"> This is effected. </div> </div>
Pierwsza klasa grid_6 nie zostanie zmieniona, podczas gdy druga klasa grid_6 będzie taka, ponieważ jest zawarta w container_12.
Oświadczenie jak
#admin .description p { font-weight:bold; }
Zastosowałby tylko pogrubienie do
tagi w obszarach, które mają opis klasy, które znajdują się w obszarze o identyfikatorze „admin”, na przykład:
<div id="admin"> <div class="description"> <p>This is bold</p> </div> </div>
źródło
.container_12 .grid_6, .container_16 .grid_8 { width: 460px; }
width:460px
zostanie zastosowane tylko do.grid_6
i.grid_8
Edycja: Oto bardzo dobry artykuł dla Ciebie
http://css-tricks.com/multiple-class-id-selectors/
źródło
.grid_6
&.grid_8
znajduje się w obrębie.container_12
lub.container_16
Kombinacje selektorów mają różne znaczenia - dołączony obraz łatwo wyjaśnia
a) Wiele selektorów oddzielonych przecinkiem (
,
) - Te same style są stosowane do wszystkich wybranych elementów.div,.elmnt-color { border: 1px solid red; }
Tutaj styl obramowania jest stosowany do
DIV
elementów i.elmnt-color
elementów zastosowanych w klasie CSS .<!-- comma example --> <div> Red border applied </div> <p class="elmnt-color"> Red border applied </p>
b) Selektory wielokrotne oddzielone spacją - nazywane są selektorami podrzędnymi.
div .elmnt-color { background-color: red; }
Tutaj styl obramowania jest stosowany do
.elmnt-color
elementów zastosowanych w klasie CSS , które są elementami potomnymiDIV
elementu.<!-- space example --> <div> Red border NOT applied </div> <p class="elmnt-color"> Red border NOT applied </p> <div> Red border NOT applied <p class="elmnt-color"> Red border applied </p> </div>
c) Wiele selektorów określonych bez spacji - tutaj style są stosowane do elementów, które spełniają wszystkie kombinacje.
div.elmnt-color { border: 1px solid red; }
Tutaj styl obramowania jest stosowany tylko do
DIV
elementów z klasą CSS równą.elmnt-color
.<!-- no space example --> <div> Red border NOT applied </div> <p class="elmnt-color"> Red border NOT applied </p> <div> Red border NOT applied <p class="elmnt-color"> Red border NOT applied </p> </div> <div class="elmnt-color"> Red border applied </div>
Szczegóły są załączone na https://www.csssolid.com/css-tips.html
Uwaga: Klasa CSS to tylko jeden z selektorów CSS. Reguły te dotyczą wszystkich selektorów CSS (np .: klasy, elementu, identyfikatora itp.).
źródło