Что делает запятые и пробелы в нескольких классах означают в CSS?

Вышесказанное означает, что вы применяют стили к двум классам, обозначенным запятой.

Когда вы видите два элемента рядом, не разделенные, можно предположить, что это относится к области внутри области. Таким образом, в приведенном выше стиле этот стиль применяется только к классам 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; }

, будет применять полужирный шрифт к тегам

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

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

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

Значение 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>

Не совсем то, о чем спрашивали, но, возможно, это поможет.

Чтобы применить стиль к элементу, только если он имеет оба класса, ваш селектор не должен использовать пробелы между именами классов.

Например:

 .class1.class2 {color: # f00; } .class1 .class2 {цвет: # 0f0; } .class1, .class2 {font-weight: жирный; } 

 
 Полужирный красный текст 
 
 Полужирный текст (не красный) 
 
 
 Полужирный зеленый текст 
 
 

Запятая группирует классы (применяет один и тот же стиль ко всем), пустое место говорит, что следующий селектор должен быть внутри первого селектора.

Поэтому

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

этот стиль применяется только к классу .grid_6, который находится внутри класса .container_12 и к классу .grid_8, который находится внутри .container_16.

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

width:460px будет применен только к .grid_6 и .grid_8

Edit: Here is very good article for you

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