Question

我是一般的网络开发新手，我只是HTML和CSS的新手。

我目前正在尝试将样式表中的声明数量最小化以进行清理，但我遇到了一些需要帮助的事情。

无论如何，这是我要问的代码：

#div1,
#div2,
#div3 {
    width: 100px; height: 100px;
    border: 1px solid #f00; 
    background-color: #0f0; 
    float: left; margin: auto 5px auto;
    position: relative; left: 10px; top: 10px;
}

这里，每个div都有绿色背景色。我想要做的是在一个声明中为每个div设置不同的颜色。

这可能吗？

感谢。感谢任何和所有帮助。

Answer 1

对这些元素进行样式设计的最简洁方法是在它们上面放置一个公共类，并且只为各个div设置它们的差异（颜色）。

.box {
  width: 100px;
  height: 100px;
  border: 1px solid #f00;
  float: left;
  margin: auto 5px auto;
  position: relative;
  left: 10px;
  top: 10px;
}
#div1 {
  background-color: #0f0;
}
#div2 {
  background-color: #0ff;
}
#div3 {
  background-color: #ff0;
}

<div class="box" id="div1"></div>
<div class="box" id="div2"></div>
<div class="box" id="div3"></div>

Answer 2

在css代码中

#box{
 width: 100px;
  height: 100px;
  border: 1px solid #f00;
  float: left;
  margin: auto 5px auto;
  position: relative;
  left: 10px;
  top: 10px;
}

在html代码中

<div id="box" style="background:green"> </div>
<div id="box" style="background:red"> </div>
<div id="box" style="background:blue"> </div>

使用单个CSS声明对多个元素着色

2 个答案: