Birden çok sınıftaki virgül ve boşluklar CSS'de ne anlama geliyor?

İşte anlamadığım bir örnek:

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

Bana öyle geliyor ki width: 460pxyukarıda belirtilen tüm sınıflara uygulanıyor. Ama neden bazı sınıflar virgülle ( ,) ve bazıları sadece boşlukla ayrılıyor ?

Bunun width: 460pxsadece sınıfları CSS dosyasında belirtildiği şekilde birleştiren öğelere uygulanacağını varsayıyorum . Örneğin, 'a uygulanacak, <div class='container_12 grid_6'>ancak <div class='container_12'>. Bu varsayım doğru mu?

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

Bu, ". Dolayısıyla, aşağıdakilerin ikisi de aynı şeyi yapacaktır:

<div class="container_12">
  <div class="grid_6">460px Wide</div>
</div>
<div class="container_16">
  <div class="grid_8">460px Wide</div>
</div>

Virgüllere gelince, bunun gibi birden çok sınıfa bir kural uygulamaktır.

.blueCheese, .blueBike {
  color:blue;
}

İşlevsel olarak şuna eşdeğerdir:

.blueCheese { color:blue }
.blueBike { color:blue }

Ancak ayrıntıyı azaltır.

.container_12 .grid_6 { ... }

Bu kural bir DOM düğümünü container_12, bir nesli olan (mutlaka bir alt grid_6öğesi olması gerekmez) sınıfla eşleştirir ve CSS kurallarını sınıfla DOM öğesine uygular grid_6.

.container_12 > .grid_6 { ... }

>Aralarına koymak grid_6, düğümün sınıflı düğümün doğrudan çocuğu olması gerektiğini söylüyor container_12.

.container_12, .grid_6 { ... }

Diğerlerinin de belirttiği gibi virgül, kuralları aynı anda birçok farklı düğüme uygulamanın bir yoludur. Bu durumda, kurallar container_12veya sınıfına sahip herhangi bir düğüm için geçerlidir grid_6.

Tam olarak ne isteniyordu, ama belki bu yardımcı olabilir.

Yalnızca her iki sınıfa da sahipse bir öğeye stil uygulamak için, seçicinizin sınıf adları arasında boşluk bırakmaması gerekir.

Örneğin:

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

Virgül , sınıfları gruplar (hepsine aynı stili uygular), boş bir alan , aşağıdaki seçicinin ilk seçici içinde olması gerektiğini söyler.

Bu nedenle

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

Sadece sınıfa o stili uygular .grid_6içindedir .container_12sınıfına ve .grid_8dahilindedir sınıfın .container_16.

width: 460px;İle elemana uygulanacak .grid_8ihtiva sınıfı içinde olan elemanlar .container_16ile sınıf ve elemanlar .grid_6ihtiva sınıfı içinde olan elemanlar .container_12.

Boşluk, miras anlamına gelir ve virgül "ve" anlamına gelir. Özellikleri gibi bir seçici ile koyarsanız
.class-a, .class-b, iki sınıftan herhangi biriyle öğelere uygulanan özelliklere sahip olursunuz.

Umarım yardım etmişimdir.

Örneğinizde dört sınıf ve iki seçici var:

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

Yani .container_12ve .grid_6her iki sınıf vardır, ama kural width: 460pxyalnızca sahip elemanlar uygulanacak .grid_6olan bir elementin soyundan geliyor sınıfını .container_16sınıfı.

Örneğin:

<div class="container_16">
<p class=".grid_6">This has a width of 480px.</p>
<p>This has an unknown width.</p>
</div>

Yukarıdaki, virgülle gösterilen iki sınıfa stil uyguladığınız anlamına gelir.

Ayrılmamış yan yana iki öğe gördüğünüzde, bunun bir alandaki bir alana atıfta bulunduğunu varsayabilirsiniz. Dolayısıyla yukarıda, bu stil yalnızca container_12 sınıfları içindeki grid_6 sınıfları ve container_16 sınıfları içindeki grid_8 sınıfları için geçerlidir.

örnekte:

<div class="grid_6">This is not effected</div>
<div class="container_12">
  <div class="grid_6">
    This is effected.
  </div>
</div>

Birinci grid_6 etkilenmeyecektir, ikinci grid_6 sınıfı ise bir container_12 içinde bulunduğu için etkilenecektir.

Gibi bir ifade

#admin .description p { font-weight:bold; }

Sadece kalın

"admin" kimliğine sahip bir alanın içinde bulunan "description" sınıfına sahip alanlardaki etiketler, örneğin:

<div id="admin">
   <div class="description">
      <p>This is bold</p>
   </div>
</div>

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

width:460pxyalnızca .grid_6ve.grid_8

Düzenleme: İşte sizin için çok iyi bir makale

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

Seçici kombinasyonları farklı anlamlar kazanır - ekli resim kolayca açıklar

a) Virgülle ( ,) ayrılmış birden çok seçici - Seçilen tüm öğelere aynı stiller uygulanır.

div,.elmnt-color {
  border: 1px solid red;
}

Burada kenarlık stili DIVöğelere ve CSS sınıfı .elmnt-coloruygulanan öğelere uygulanır.

<!-- comma example -->
<div>
  Red border applied
</div>
<p class="elmnt-color">
  Red border applied
</p>

b) Boşlukla ayrılmış birden çok seçici - Bunlara alt seçiciler denir.

div .elmnt-color {
  background-color: red;
}

Burada kenarlık stili, bir öğenin alt öğeleri .elmnt-colorolan CSS sınıfı uygulanan öğelere uygulanır .DIV

<!-- 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) Boşluksuz belirtilmiş birden çok seçici - Burada stiller, tüm kombinasyonları karşılayan öğelere uygulanır.

div.elmnt-color {
  border: 1px solid red;
}

Burada kenarlık stili yalnızca DIVCSS sınıfı olan öğelere uygulanır .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>

Ayrıntılar https://www.csssolid.com/css-tips.html adresinde eklenmiştir.

Not: CSS Sınıfı, CSS Seçicilerinden yalnızca biridir. Bu kurallar tüm CSS Seçiciler için geçerlidir (örn: Sınıf, Öğe, Kimlik vb.).