Co oznaczają przecinki i spacje w wielu klasach w CSS?

98

Oto przykład, którego nie rozumiem:

.container_12 .grid_6,
.container_16 .grid_8 {
    width: 460px;
}

Wydaje mi się, że width: 460pxdotyczy to wszystkich wyżej wymienionych klas. Ale dlaczego niektóre klasy są oddzielone przecinkiem ( ,), a niektóre po prostu spacją?

Zakładam, że width: 460pxzostanie 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?

rzymski
źródło
Wiem, że to nie odpowiada na Twoje pytanie, ale chciałbym zaproponować wypróbowanie SASS. Wygląda na to, że będziesz mieć mnóstwo zduplikowanych CSS, biorąc pod uwagę nazwy klas.
Chuck Callebs,
1
@Roman Może być również `.container_12 .grid_6.line` Uwaga, brak spacji między grid_6 a linią; oznacza to, że element powinien mieć zarówno grid_6, jak i line jako klasy. I powinno to być dziecko „kontenera”, jak wskazuje @Sampson w przyjętej odpowiedzi :)
Paulo

Odpowiedzi:

161
.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ść.

Sampson
źródło
1
Rozumiem, że możemy zastosować jedną regułę do kilku klas oddzielonych przecinkami. Nie jest dla mnie jasne, dlaczego niektóre klasy w przykładzie nie są oddzielone przecinkami.
Roman
9
Kiedy są oddzielone spacją, jest to problem z zagnieżdżaniem. Te ostatnie znajdują się w pierwszym. Dotyczy .container_12 .grid_6to tylko .grid_6elementów znalezionych w ramach .container_12przedmiotów.
Sampson,
33
.container_12 .grid_6 { ... }

Ta reguła dopasowuje węzeł DOM z klasą, container_12która ma potomka (niekoniecznie dziecko) z klasą grid_6i stosuje reguły CSS do elementu DOM z klasą grid_6.

.container_12 > .grid_6 { ... }

Umieszczenie >między nimi mówi, że grid_6wę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_12lub grid_6.

Steve Madsen
źródło
inni powiedzieli i nie lub?
Kick Buttowski
Świetna odpowiedź, jak fakt, że to wyjaśnia różnicę <space>i >między klasami / IDS.
Alex Lowe,
14

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>

Alan Peabody
źródło
7

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_6która jest w .container_12klasie i do .grid_8klasy, która jest w niej .container_16.

Cloudanger
źródło
6

width: 460px;Będą stosowane do elementu z .grid_8grupy, zawarte wewnątrz elementów z .container_16klasy i elementów z .grid_6grupy, 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.

3rgo
źródło
3

W swoim przykładzie masz cztery klasy i dwa selektory:

.container_12 .grid_6,
.container_16 .grid_8 {
    width: 460px;
}

Tak .container_12i .grid_6obie są klasami, ale reguła width: 460pxbędzie stosowana tylko do elementów, które mają .grid_6klasę, która jest potomkiem elementu, który ma tę .container_16klasę.

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>
James Sumners
źródło
3

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>
niezdarne palce
źródło
To naprawdę pomaga! Zwłaszcza ilustracja #, po której następuje „.”.
Shao-Kui
1
.container_12 .grid_6,
.container_16 .grid_8 {
    width: 460px;
}

width:460pxzostanie zastosowane tylko do .grid_6i.grid_8

Edycja: Oto bardzo dobry artykuł dla Ciebie

http://css-tricks.com/multiple-class-id-selectors/

Jitendra Vyas
źródło
3
Tylko jeśli .grid_6& .grid_8znajduje się w obrębie .container_12lub.container_16
pokaż
@sshow - Dzięki. masz rację, ale to jest problem HTML. zgodnie z tym kodem css moja odpowiedź jest prawidłowa
Jitendra Vyas
-2

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 DIVelementów i .elmnt-colorelementó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-colorelementó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 DIVelementó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.).

Selva
źródło