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

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?

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

.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.

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>

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.

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.

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>

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>

.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/

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.).