css - CSS继承，或类似的东西

Question

这可能是个愚蠢的问题，但它就在这里。

我的 css 文件中有 3 个 ID，它们都有相同的代码。例如：

#ID1 {
    // some code
    width: 300px;
    height: 300px;
}    
#ID2 {
    // some code
    width: 300px;
    height: 300px;
}    
#ID3 {
    // some code
    width: 300px;
    height: 300px;
}

我的问题是：是否可以在 CSS 中创建一些类或 ID，并在另一个 CSS 类或 ID 中调用它。例如：

#setting {
    width: 300px;
    height: 300px;
}
#ID1 {
    .setting        
    // some code
}    
#ID2 {
    .setting  
    // some code
}    
#ID3 {
    .setting  
    // some code
}

谢谢。

Answer 1

您可以在单个元素上使用多个 CSS 类。

您可以创建“通用”类并将它们应用于元素。

例如：

<div class="class1 class2">some content</div>

请记住，如果 class1 和 class2 中存在公共属性，则 class2 中该属性的值将覆盖该元素上 class1 中的值，最终该元素将具有 class2 中定义的值。

真正的旧浏览器不支持这一点，但很可能你不应该担心它们。

Answer 2

您可以通过应用对其父类的引用来覆盖 css，请查看以下示例：

#setting {
width: 300px;
height: 300px;
}
#ID1 .setting {
   // some code
}    
#ID2 .setting  {
   // some code
}    
#ID3 .setting  {
   // some code
}

上面的代码将分别应用 ID1、ID2、ID3 内的所有“设置”类标签。如果您的“设置”孩子是直接班级，那么您可以在下面作为示例：

#setting {
width: 300px;
height: 300px;
}
#ID1 > .setting {
   // some code
}    
#ID2 > .setting  {
   // some code
}    
#ID3 > .setting  {
   // some code
}

上面的代码将仅适用于以“设置”类命名的直接子级。

Answer 3

您要查找的内容称为 LESS。在这里阅读

Answer 4

不，这在 CSS 中是不可能的，它与继承无关。在 CSS 规则中，您将所有选择器放在“{”之前，并且仅将声明（属性：值）放在“{”和“}”之间。

但是您可以在元素上同时使用id属性和属性，如class

<div id="ID1" class="setting">...</div>

然后如果你有例如

.setting {
    width: 300px;
    height: 300px;
}

（注意：.not #），这些声明适用于所有带有 的元素class=setting，以及由于其他 CSS 规则而可能适用的任何其他声明。