多个类中的逗号和空格在 CSS 中意味着什么？

小开

最佳答案

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

上面写着“全部制造”。坐标 _ 6在里面。容器 _ 12和所有。坐标 _ 8在里面。容器 _ 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 }

但是可以减少冗长。

小开

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

width:460px将仅适用于 .grid_6和 .grid_8

编辑: 这是一篇非常适合你的文章

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

小开

逗号对类进行分组(对所有类应用相同的样式) ，一片空白告诉下面的选择器必须位于第一个选择器中。

因此

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

将该样式仅应用于 .container_12类中的 .grid_6类和 .container_16类中的 .grid_8类。

小开

以上意味着您正在将样式应用于两个类，由逗号指示。

当你看到两个并排的元素没有分开时，你可以假设它指的是一个区域内的一个区域。因此，在上面的例子中，这种风格只适用于 Container _ 12类中的 grid _ 6类和 Container _ 16类中的 grid _ 8类。

例如:

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

将只对 < p > 标记应用粗体，这些标记位于 id 为“ admin”的区域内，这些区域具有类“ description”，例如:

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

小开

.container_12 .grid_6 { ... }

该规则匹配具有类 grid_6的子类(不一定是子类)的 DOM 节点，并将 CSS 规则应用于具有类 grid_6的 DOM 元素。

.container_12 > .grid_6 { ... }

将 >放在它们之间表示 grid_6节点必须是具有类 container_12的节点的直接子节点。

.container_12, .grid_6 { ... }

正如其他人所说，逗号是一种一次将规则应用于许多不同节点的方法。在这种情况下，规则适用于具有 container_12或 grid_6类的任何节点。

小开

width: 460px;将应用于具有 .grid_8类的元素，包含 在里面的元素具有 .container_16类，而具有 .grid_6类的元素，包含 在里面的元素具有 .container_12。

空格表示继承，逗号表示“和”。如果你在属性中加上一个选择符，比如
.class-a, .class-b中的任何一个类都可以将属性应用于元素。

希望我帮上忙了。

小开

在示例中有四个类和两个选择器:

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

小开

虽然不完全符合要求，但也许这个会有帮助。

如果一个元素同时具有两个类，那么要将样式应用于该元素，您的选择器应该在类名之间不使用空格。

例如:

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

小开

选择器组合得到不同的含义-附加图像解释容易

A)用逗号分隔的多个选择符(,)——对所有选定的元素应用相同的样式。

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

这里边框样式应用于 DIV元素和 CSS 类 .elmnt-color应用元素。

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

B)由空格分隔的多个选择器-这些被称为子代选择器。

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

这里边框样式应用于 CSS 类 .elmnt-color应用元素，它们是 DIV元素的孩子元素。

 <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 类 .elmnt-color的 DIV元素。

 <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 等)。