Question

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

在A.html中，我有class =＆＃34; A_container＆＃34;

在B.html中，我有class =＆＃34; B_container＆＃34;

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

所以两个容器中的background-size和background-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

Answer 2

您可以使用语法

为多个选择器定义规则

selector1, selector2 { 
    property: value; 
}

在您的具体示例中：

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

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

.B-container {
    background:url('picture2.jpg');
    background-position: 50% 0;
}

不同页面中的不同类在css中的相同信息

2 个答案: