Несколько классов css [duplicate]

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

Поэтому

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

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

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

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

Первая сетка_6 не будет будет выполняться, в то время как второй класс grid_6 будет потому, что он содержится внутри контейнера_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;
}

Таким образом, .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>

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

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

. Редактирование: вот вам очень хорошая статья

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

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

width: 460px; будет применен к элементу с классом .grid_8, содержащим внутри элементы класса .container_16 и элементы с классом .grid_6, содержащиеся в внутри элементы с .container_12.

Космос означает наследие, а запятая означает «и». Если вы поместите свойства с помощью селектора типа .class-a, .class-b, у вас будут свойства, применяемые к элементам с любым из двух классов.

Надеюсь, я помог.