CSS类继承

我可以在CSS中创建“类继承”吗？比如：

.squareButton {width:20px; height:20px; margin:1px solid;}
.squareRedButton {.squareButton; background:red;}

---

是的，您可以，只需将所需的CSS应用于所需的两个类：

.squareButton, .squareRedButton {
    width : 20px; 
    height : 20px; 
    margin : 1px solid;
}

.squareRedButton { 
    background : red;
}

注意

您可以通过HTML使用几个类来执行如下继承：

CSS

.squareButton {
    width : 20px; 
    height : 20px; 
    margin : 1px solid;
}

.squareRedButton {
    background:red;
}

HTML

<button class="squareButton squareRedButton">MyButton</button>

MyButton

.square按钮{
宽度：20px；
高度：20px；
边距：1倍实心；
}
.bg红色{
背景：红色；
}

---

这是一种简短的代码方式。

您是否尝试过SASS或更少@我敢肯定。或者给DOM元素两个类（

），我更愿意使用您的解决方案@Thilo，因为它更好地说明了继承的概念，所以我的答案是CSS方式。第三种方式是使用SASS之类的预处理器或更少的预处理器来扩展squareRedButton类，使其包含您想要继承的所有内容。但是如果我有一个更大的继承树，具有更大的深度，这会变得相当复杂。。。需要多次重复许多类…因为CSS不是一种编程语言，它没有对象纯继承的概念。只有级联样式系统通过我给你的第一个解决方案。但是，如果这三种风格越来越难，请遵循@Thilo-answer，使用诸如SASS或更少的预处理CSS，以更接近具有高度风格复杂性的真实编程系统。

.squareButton{
    width : 20px; 
    height : 20px; 
    margin : 1px solid;
}

.bg-red { 
    background : red;
}


<div class="squareButton bg-red">