继承CSS类

Question

我的CSS文件中有一个带有几个属性的基础.base {}.我想只改变颜色和其他属性以保持相同.如何在其他类中继承这个基类？

Answer 1

CSS"类"不是OOP"类".继承的作用相反.
DOM元素可以有许多类,直接或继承或以其他方式关联,这些类都将按顺序应用,从而覆盖先前定义的属性:

<div class="foo bar">

.foo {
    color: blue;
    width: 200px;
}

.bar {
    color: red;
}

div的宽度为200px,颜色为红色.

您可以使用不同的类覆盖DOM元素的属性,而不是CSS类的属性.CSS"类"是规则集,ids或标记可以用作规则集.

请注意,应用类的顺序取决于选择器的优先级和特异性,这本身就是一个复杂的主题.

Answer 2

正如其他人已经提到的,CSS中没有OOP继承的概念.但是,我一直在努力解决这个问题.

假设我有两个按钮,除了背景图像URL之外,所有其他属性都很常见.这就是我做到的.

/*button specific attributes*/
.button1 {
    background-image: url("../Images/button1.gif");
}
/*button specific attributes*/
.button2 {
    background-image: url("../Images/button2.gif");
}

/*These are the shared attributes */
.button1, .button2 {
    cursor: pointer;
    background-repeat: no-repeat;
    width: 25px;
    height: 20px;
    border: 0;
}

希望这有助于某人.

Answer 3

您可以使用所需的属性创建另一个类,并将此类添加到您的类属性中:

.classA
{
  margin: 0;
  text-align: left;
}

.classB
{
  background-color: Gray;
  border: 1px solid black;
}

<div class="classA classB">My div</div>

Answer 4

你不在css中继承,只需在元素中添加另一个类来覆盖值

.base{    
  color:green;
  ...other props
}

.basealt{
   color:red;
}

<span class="base basealt"></span>