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

Question

Вот пример, который я не понимаю:

.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'>, Это предположение верно?

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

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

Answer 2

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

Answer 3

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

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

Например:

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

Answer 4

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

Следовательно

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

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

Answer 5

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

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

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

Answer 6

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

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

Answer 7

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

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

Answer 8

Комбинации селекторов имеют разные значения - прикрепленное изображение легко объясняется

а) Несколько селекторов, разделенных запятой (",") - одинаковые стили применяются ко всем выбранным элементам.

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

Здесь стиль границы применяется к элементам DIV и классам CSS (.elmnt-color).

б) Несколько селекторов, разделенных пробелом - они называются потомками селекторов.

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

}

Здесь стиль границы применяется к применяемым элементам класса CSS (.elmnt-color), которые являются дочерними элементами элемента DIV.

c) Несколько селекторов, указанных без пробела - Здесь стили применяются к элементам, которые соответствуют всем комбинациям.

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

Здесь стиль рамки применяется только к классу CSS (.elmnt-color), применяемому только к элементам DIV.

Подробности прилагаются по адресу https://www.csssolid.com/css-tips.html

Примечание. Класс CSS является одним из селекторов CSS. Вышеуказанное правило применимо ко всем селекторам CSS (например, Class, Element, ID и т. Д.).

Answer 9

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

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

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

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

Answer 10

Проще говоря, это групповой селектор. Например,

      h1, h2, h3 { font-family: sans-serif }

эквивалентно:

      h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }