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

Ответ 1

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

Это говорит: "Сделайте все .grid_6 внутри .container_12 и всех .grid_8 внутри .container_16 460 пикселей в ширину". Таким образом, оба из них будут делать то же самое:

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

Но сокращается многословие.

Ответ 2

.container_12 .grid_6 { ... }

Это правило соответствует DOM node с классом container_12, у которого есть дочерний (не обязательно дочерний) класс grid_6, и применяет правила CSS к элементу DOM с классом grid_6.

.container_12 > .grid_6 { ... }

Ввод > между ними говорит о том, что grid_6 node должен быть прямым потомком node с классом container_12.

.container_12, .grid_6 { ... }

Запятая, как утверждают другие, является способом применения правил ко множеству разных узлов за один раз. В этом случае правила применяются к любому node с классом container_12 или grid_6.

Ответ 3

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

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

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

Ответ 4

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

Поэтому

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

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

Ответ 5

Не совсем то, что было задано, но, возможно, это поможет.

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

Пример:

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

Ответ 6

В вашем примере есть четыре класса и два селектора:

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

So .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.&lt/p>
</div>

Ответ 7

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

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

Изменить: Вот вам очень хорошая статья

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

Ответ 8

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

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

Оператор типа

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

Применил бы полужирный шрифт к тегам

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

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