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

Question 1

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

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

Question 2

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

Но снижает многословие.

Question 3

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

Question 4

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

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

Например:

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

Развернуть фрагмент

Question 5

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

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

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

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

Question 6

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

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

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

Question 7

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

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

Question 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 будет, потому что он содержится внутри container_12.

Заявление вроде

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

Применял бы только жирный шрифт к

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

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

Question 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/

Question 10

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

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

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

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

<!-- comma example -->
<div>
  Red border applied
</div>
<p class="elmnt-color">
  Red border applied
</p>

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

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

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

<!-- space example -->
<div>
  Red border NOT applied
</div>
<p class="elmnt-color">
  Red border NOT applied
</p>
<div>
  Red border NOT applied    
  <p class="elmnt-color">
    Red border applied
  </p>
</div>

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

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

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

<!-- no space example -->
<div>
  Red border NOT applied
</div>
<p class="elmnt-color">
  Red border NOT applied
</p>
<div>
  Red border NOT applied    
  <p class="elmnt-color">
    Red border NOT applied
  </p>
</div>
<div class="elmnt-color">
  Red border applied
</div>

Подробности размещены на https://www.csssolid.com/css-tips.html.

Примечание. Класс CSS - это всего лишь один из селекторов CSS. Эти правила применяются ко всем селекторам CSS (например, класс, элемент, идентификатор и т. Д.).