Что означают запятые и пробелы в нескольких классах в 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.&lt/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

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

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

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

http://css -tricks.com / многоразовое класс-ID-селекторы /

Answer 9

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

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

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

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

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

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

*

} * 1013

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

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

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

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

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

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