1

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

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

.myButton-ok {
  background: green;
}

.myButton-warn {
 background: orange;
}

但是我怎样才能让这些类扩展.myButton类，这样我只需要应用 eg.myButton-ok并且维护所有其他基本按钮样式？

4

5 回答 5

3

CSS 不能那样工作。它不使用继承本身......它使用基于选择器的特异性的级联来覆盖属性。做到这一点的唯一方法是使用 LESS 或 SASS 之类的预处理器，您可以在其中扩展它们。

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

<a class="myButton myButton-ok"></a>
于 2013-04-07T19:01:36.663 回答
1

为按钮添加一个额外的类以使其生效。像这样的东西-

.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
于 2013-04-07T19:04:20.950 回答
0

在 Css 中你不能那样做。

但是，在这些类型的情况下，我们可以通过将通用属性和特定属性分开来实现相同的效果，如下所示：

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

.myButton-ok {
  background: green;
}

.myButton-warn {
 background: orange;
}
于 2013-04-07T19:04:22.407 回答
0

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

内联样式 > 类 > id。

所以你可以定义一个通用的类按钮：

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

并为您的 OK 按钮定义一个内联样式（在 html 中）：

style="background:green"

或者，您总是可以为每个按钮定义一个特定的 id 样式，但是对于仅仅改变颜色我认为它是矫枉过正的：

#myButton-ok{ background: green};
于 2013-04-07T19:11:30.477 回答
0

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

因此，我们需要换个角度思考。在您的示例中，您可以使用例如

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

.ok {
   background: green;
}

.warn {
   background: orange;
}

和标记之类的<button class="button warn">。这意味着该元素属于两个类，并且应用了它们的声明。这里很重要的是，其他条件相同，如果同一属性的两个声明适用于一个元素，则后一个声明（即，稍后出现在样式表中的声明）获胜。

于 2013-04-07T19:19:41.737 回答