html - 不同页面中的不同类在 css 中具有相同的信息

Question

例如我有两个 html，A.html 和 B.html，它们都使用相同的 styles.css

在 A.html 中，我有 class="A_container"

在 B.html 中，我有 class="B_container"

在文件 styles.css 中

.A_container {
background:url('picture1.jpg');
background-position: 40% 0;
background-size: cover;
background-repeat: no-repeat;
}
.B_container {
background:url('picture2.jpg');
background-position: 50% 0;
background-size: cover;
background-repeat: no-repeat;
}

所以两个容器中的背景大小和背景重复是相同的，那么有没有办法可以减少这种冗余？

Answer 1

您可以像这样为这两个类创建通用规则集:

.A_container, .B_container {
  background-size: cover;
  background-repeat: no-repeat;
}

.A_container {
  background-image: url('picture1.jpg');
  background-position: 40% 0;
}
.B_container {
  background-image: url('picture2.jpg');
  background-position: 50% 0;
}

同时将背景更改为背景图像，因为它将覆盖背景大小和背景重复属性。另一种选择是将通用规则集移至类特定规则集之下。

您可以在此处找到有关规则集的文档:http://www.w3.org/TR/CSS2/syndata.html#rule-sets