Question

我正在学习CSS，我发现这种语法可以将多个选择器分组：

element-1, element-2 {
    /* css declarations */
}

这意味着元素具有相同的样式，为什么我们不给它们相同的类？有什么建议吗？

Answer 1

您可以在不使用选择器组的情况下编写CSS规则，但可以使用这些组最小化CSS代码。请参阅以下示例：

＆＃13;

.one, .two {
  color:red;
}
.two {
  text-decoration:underline;
}

/** not optimized / no selector group */
.oneone {
  color:red;
}
.twotwo {
  color:red;
  text-decoration:underline;
}

＆＃13;

<p class="one">Hello World #1</p>
<div class="two">Hello World #2</div>

<p class="oneone">Hello World #1</p>
<div class="twotwo">Hello World #2</div>

＆＃13;

Answer 2

虽然一般语法决策背后可能有许多推理，但我至少可以命名一个。请看以下示例：

ul, li, p {
  padding: 0; margin: 0;
}

有时，当您在不同元素中重置样式时，可以使用,。您可以使用类对这些进行分组，但这意味着您需要为.no-padding，ul，li添加类似p的类。

不整洁。

Answer 3

这是另一个加入已经展示过的两个插图（Dai和sebastianbrosch）

假设您有一个为HTML元素设置一些值的类：

.someClass {
    font-size:1.1rem;
    color:#c00;
    border: 2px solid #000;
    padding: 1vh 1vw;
}

假设您有另一个元素（.someOtherElement），您想要与someClass具有相同的字体大小，并且颜色相同，填充相同但没有边框？

选项1：把所有东西写出来两次：

.someClass {
    font-size:1.1rem;
    color:#c00;
    border: 2px solid #000;
    padding: 1vh 1vw;
} 
.someOtherElement {
    font-size:1.1rem;
    color:#c00;
    padding: 1vh 1vw;
}

选项2 ：不要两次写出所有内容：

.someClass, .someOtherElement {
    font-size:1.1rem;
    color:#c00;
    padding: 1vh 1vw;
} 
.someClass {
     border: 2px solid #000;
}

这更符合DRY编程原则，并允许极大的灵活性，根据需要将各种规则应用于尽可能多的标识符。

什么是CSS选择器分组的需要

3 个答案: