Що означають коми та пробіли в декількох класах у CSS?

Ось приклад, якого я не розумію:

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

Мені здається, width: 460pxце застосовується до всіх вищезазначених класів. Але чому деякі класи розділяються комою ( ,), а деякі просто пробілом?

Я припускаю, що width: 460pxце буде застосовано лише до тих елементів, які поєднують класи так, як зазначено у файлі CSS. Наприклад, це буде застосовано до, <div class='container_12 grid_6'>але не буде застосовано до <div class='container_12'>. Чи правильно це припущення?

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

Це говорить "зробити всі .grid_6 в межах .container_12 та всі .grid_8 в межах. 460 пікселів .container_16." Отже, обидва наведені нижче стануть однаковими:

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

Що стосується коми, то воно застосовує одне правило до кількох класів, як це.

.blueCheese, .blueBike {
  color:blue;
}

Це функціонально еквівалентно:

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

Але скорочує багатослівність.

.container_12 .grid_6 { ... }

Це правило узгоджує вузол DOM з класом, container_12який має нащадок (не обов'язково дочірній) з класом grid_6, і застосовує правила CSS до елемента DOM з класом grid_6.

.container_12 > .grid_6 { ... }

Поміщення >між ними grid_6означає, що вузол повинен бути прямим потомком вузла з класом container_12.

.container_12, .grid_6 { ... }

Кома, як зазначали інші, - це спосіб застосувати правила до багатьох різних вузлів одночасно. У цьому випадку правила застосовуються до будь-якого вузла з класом container_12або grid_6.

Не зовсім те, про що просили, але, можливо, це допоможе.

Щоб застосувати стиль до елемента, лише якщо він має обидва класи, ваш селектор не повинен використовувати пробіл між іменами класів.

Наприклад:

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

Кома групує класи (застосовує один і той же стиль до всіх них), порожній пробіл говорить про те, що наступний селектор повинен бути в першому селекторі.

Тому

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

застосовує цей стиль лише до класу, .grid_6який знаходиться всередині .container_12класу, і до .grid_8класу, який знаходиться всередині .container_16.

width: 460px;Застосовуватиметься до елементу з .grid_8класом, що містяться всередині елементів з .container_16класом, а елементи з .grid_6класом, що містяться всередині елементів з.container_12 .

Пробіл означає спадщину, а кома означає "і". Якщо ви встановите властивості за допомогою селектора типу
.class-a, .class-b, ви отримаєте властивості, застосовані до елементів з будь-яким із двох класів.

Сподіваюся, я допоміг.

У вашому прикладі є чотири класи та два селектори:

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

Так .container_12і .grid_6є обома класами, але правило width: 460pxзастосовуватиметься лише до елементів, які мають .grid_6клас, що є нащадками елемента, який має.container_16 клас.

Наприклад:

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

Вищезазначене означає, що ви застосовуєте стилі до двох класів, позначених комою.

Коли ви бачите два елементи поруч, не розділені, ви можете припустити, що це стосується області в межах області. Отже, вище, цей стиль застосовується лише до класів grid_6 усередині класів container_12 та класів grid_8 всередині класів container_16.

у прикладі:

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

Перший grid_6 не буде здійснений, тоді як другий клас grid_6 буде, оскільки він міститься всередині container_12.

Заява типу

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

Буде застосовано лише жирний шрифт

теги в областях, які мають клас "опис", що знаходиться всередині області з ідентифікатором "admin", наприклад:

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

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

width:460pxзастосовуватиметься лише до .grid_6та.grid_8

Редагувати: Ось дуже хороша стаття для вас

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

Комбінації селекторів мають різне значення - додане зображення легко пояснює

а) Кілька селекторів, розділених комою ( ,) - до всіх вибраних елементів застосовуються однакові стилі.

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

Тут застосовується стиль кордону DIV елементів та .elmnt-colorзастосованих елементів класу CSS .

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

б) Кілька селекторів, розділених пробілом - їх називають селекторами нащадків.

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

Тут стиль кордону застосовується до .elmnt-colorелементів класу CSS, які є дочірніми елементами 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>

в) Кілька селекторів вказано без пробілу - тут стилі застосовуються до елементів, які відповідають всім комбінаціям.

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

Тут стиль кордону застосовується лише до DIVелементів із класом CSS.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>

Деталі додаються за адресою адресою https://www.csssolid.com/css-tips.html

Примітка: Клас CSS - це лише один із селекторів CSS. Ці правила стосуються всіх селекторів CSS (наприклад: класу, елемента, ідентифікатора тощо).