Question

我想创建不同的按钮样式，例如只应在颜色上有所不同。所以我认为我为按钮创建了一个基本的css类，并继承了它们并且只是覆盖了颜色（至少从Java的角度来看这将是我的方法......）。

.myButton {
   padding:...
   width:...
   background: white;
}

.myButton-ok {
  background: green;
}

.myButton-warn {
 background: orange;
}

但是如何让这些类扩展.myButton类，这样我只需要应用例如.myButton-ok并保留所有其他基本按钮样式？

Answer 1

CSS不会那样工作。它不使用继承perse ...它使用基于选择器的特性的级联来覆盖属性。唯一的方法是使用像LESS或SASS这样的预处理器来扩展它们。

使用原始css，我将为两个类分配默认样式的按钮，然后分配具有特定样式的按钮。

<a class="myButton myButton-ok"></a>

Answer 2

在按钮中添加其他类以使其生效。像这样的东西 -

.myButton {
padding:...
width:...
background: white;
}

.red {
background: red;
}

.blue {
background: blue;
}

<button Class="myButton">Button</button>  // basic button
<button Class="myButton red">Button</button>  // with red BG
<button Class="myButton blue">Button</button>  // with blue BG

Answer 3

在Css中你不能这样做。

但是，在这些类型的情况下，我们可以通过隔离常见属性和特定属性来实现相同目的：

 .myButton, myButton-ok, myButton-warn {
   padding:...
   width:...;
   /*Other common properties, except specific ones like "background"*/
}

.myButton-ok {
  background: green;
}

.myButton-warn {
 background: orange;
}

Answer 4

在CSS中，“强度”顺序是这样的：

内联样式＆gt;课程＆gt;标识。

所以你可以定义一个公共类按钮：

.myButton {
padding:...
width:..};

并为您的OK按钮定义内联样式（以html格式）：

style="background:green"

或者，你总是可以为每个按钮定义一个特定的id样式，但是只是改变颜色我认为它是过度的：

#myButton-ok{ background: green};

Answer 5

CSS在编程意义上没有类或继承概念。它只有类选择器，它允许您为具有特定class属性（HTML事物）的元素指定属性，并且它具有完全不同意义上的继承：在某些条件下，元素从其父元素继承属性值在文档树中（这与类无关）。

因此，我们需要以不同的方式思考。在您的示例中，您可以使用例如

.myButton {
   padding:...
   width:...
   background: white;
}

.ok {
   background: green;
}

.warn {
   background: orange;
}

和<button class="button warn">之类的标记。这意味着该元素属于两个类，并且已经应用了这两个类的声明。在其他条件相同的情况下变得相关，如果同一属性的两个声明适用于一个元素，后一个声明（即后面出现在样式表中的声明）将获胜。

css继承如何正常工作？

5 个答案: