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

Question

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

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

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

616 8

css css-selectors

8 ответов:

Comments

Ничего не найдено.

Sampson · Accepted Answer · 2010-07-27 16:50:43

.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 }
но сокращает многословие.

Steve Madsen · Accepted Answer · 2010-07-27 16:54:57

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

Alan Peabody · Accepted Answer · 2018-07-29 05:28:21

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

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

Например:
.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>

Cloudanger · Accepted Answer · 2010-07-27 16:52:03

запятая группирует классы (применяет к ним одинаковый стиль),пустое пространство указывает, что следующий селектор должен находиться в пределах первого селектора.
.container_12 .grid_6,
.container_16 .grid_8 {
    width: 460px;
}
применяет этот стиль только к классу .grid_6 что внутри .container_12 класс а .grid_8 класс, который находится вблизи .container_16.

3rgo · Accepted Answer · 2011-12-14 17:12:53

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

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

надеюсь, что у меня есть помог.

James Sumners · Accepted Answer · 2010-07-27 16:59:36

у вас есть четыре класса и два селектора в вашем примере:
.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>

clumsyfingers · Accepted Answer · 2010-07-27 16:59:56

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

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

теги в областях, которые имеют класс "описание", которые находятся внутри области с идентификатором "Admin", Как:
<div id="admin">
   <div class="description">
      <p>This is bold</p>
   </div>
</div>

Jitendra Vyas · Accepted Answer · 2010-07-27 16:56:30

.container_12 .grid_6,
.container_16 .grid_8 {
    width: 460px;
}
width:460px будет применяться только к .grid_6 и .grid_8

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

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