文章/答案/技术大牛

发布

社区首页 >问答首页 >对CSS选择器进行分组的需要是什么

问对CSS选择器进行分组的需要是什么
EN

Stack Overflow用户

提问于 2016-04-20 14:57:03

回答 3查看 60关注 0票数 0

我正在学习CSS，我发现了这个语法来对多个选择器进行分组：

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

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

css

css-selectors

回答 3

Stack Overflow用户

发布于 2016-04-20 15:06:02

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

.one, .two {
  color:red;
}
.two {
  text-decoration:underline;
}

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

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

票数 1

Stack Overflow用户

发布于 2016-04-20 15:07:18

虽然在一般的语法决定背后可能有许多推理，但我至少可以说出一个。下面是一个例子：

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

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

不是很整洁。

票数 1

Stack Overflow用户

发布于 2016-04-20 18:49:01

这是另一个加入这两个特色的插图(由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的编程原则，并允许极大的灵活性，可以根据需要对任意多或少的标识符应用各种规则。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/36736048

复制

相似问题

问对CSS选择器进行分组的需要是什么
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问对CSS选择器进行分组的需要是什么EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问对CSS选择器进行分组的需要是什么
EN