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

此规则匹配具有类

container_12

的 DOM 节点，该节点具有类

grid_6

的后代（不一定是子节点），并将 CSS 规则应用于类

grid_6

的 DOM 元素。

.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

都是类，但规则

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

在示例中：

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

仅将粗体应用于 ID 为“admin”的区域内具有类“description”的区域内的

 标签，例如：

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

Answer 8

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>

b）用空格分隔的多个选择器 - 这些称为后代选择器。

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

此处边框样式应用于 CSS 类

.elmnt-color

 应用的元素，这些元素是 

DIV

元素的

child

元素。

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

此处边框样式仅应用于 CSS 类为

DIV

 的 

.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 选择器（例如：类、元素、ID 等）。

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

Answer 9

width:460px

 仅适用于 

.grid_6

和

.grid_8

编辑：这是一篇非常适合您的文章

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