将已定义的CSS添加到另一个CSS中

标题有点混乱，让我给你看看。假设我有以下CSS文件：

#container_1 {
    width:50%;
    border:1px solid black;
    }

#container_2 {
    background-color:red;
    padding:5px;
}

如果我希望容器_2具有50%的宽度和1x边框，与容器_1相同，是否有某种方法来定义容器_2的CSS，同时包括容器_1中的CSS，而不必实际为容器_2的CSS添加50%的宽度和1x边框

比如：

#container_2 {
    include:#container_1;
    background-color:red;
    padding:5px;
}

---

谢谢

添加逗号以将容器2设置为与容器1相同的样式

#container_1,#container_2 {
    width:50%;
    border:1px solid black;
    }

#container_2 {
    background-color:red;
    padding:5px;
}

---

你可以这样写：

#container_1, 
#container_2 {
    /* Shared Styles */
    width:50%;
    border:1px solid black;
}

#container_2 {
    background-color:red;
    padding:5px;
}

否则，您可以创建一个所有容器在HTML中共享的类

#container_base {
    /* Shared Styles */
}
#container_2 {
    background-color:red;
    padding:5px;
}    

<div class="container_base container_2"></div>

集装箱基础{
/*共享样式*/
}
#集装箱2{
背景色：红色；
填充物：5px；
}    

您可以这样做

#container

是您的命令类，因此您需要了解它们的属性

#container_2 {
    background-color:red;
    padding:5px;
}

#container_1, #container2 {
    width:50%;
    border:1px solid black;
}

---

在上面的代码中，您可以得到所需的实际输出

在css中，我们不能将一个类的属性直接继承给另一个类，但是为了简化这一点，我们可以编写以下代码：

#container_1,#container_2 {
    width:50%;
    border:1px solid black;
    }

#container_2 {
    background-color:red;
    padding:5px;
}

这样#container_2除了其独特的属性外，还具有#container_1的所有属性

或

我们可以使用Sass做同样的事情，Sass有一个叫做@mixin的特性，我们可以在这里实现这一点

例如

@mixin reset-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

@mixin horizontal-list {
  @include reset-list;

  li {
    display: inline-block;
    margin: {
      left: -2px;
      right: 2em;
    }
  }
}

有关更多详细信息，请访问

---

@Dhaust我认为这不是重复的，因为他在问是否可以在另一个文件中定义另一种样式，包括另一个文件中的其他样式。