Question

标题有点混乱，所以让我告诉你。可以说我在CSS文件中有以下内容：

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

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

如果我想让container_2具有50％的宽度和1x边框，与container_1相同，是否有某种方法可以定义container_2的CSS，同时包含来自container_1的CSS，而不必为之添加50％的宽度和1x边框container_2的CSS？

类似的东西：

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

谢谢

Answer 1

在css中，我们不能直接将一个类的属性继承到另一个类，但是为了简化此过程，我们可以编写上面的代码，例如：

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

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

这样，＃container_2将具有＃container_1的所有属性，除了其独特的属性。

OR

我们可以使用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;
    }
  }
}

有关更多详细信息，请访问 https://sass-lang.com/documentation/at-rules/mixin

Answer 2

添加逗号以将container_2设置为与container_1相同的样式

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

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

Answer 3

您可以这样写：

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

Answer 4

您可以像这样做。

#container是您的命令类，因此您需要考虑它们的属性。

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

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

在上面的代码中，您可以根据需要获取实际输出。

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

4 个答案: