css继承如何正确工作？

我想创建不同的按钮样式，它们应该只在颜色上有所不同。所以我想我为这个按钮创建了一个基本的css类，并继承它们，并重写颜色（至少这是我从Java角度来看的方法）。css继承如何正确工作？

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

.myButton-ok { 
    background: green; 
} 

.myButton-warn { 
background: orange; 
}

但我怎样才能使这些类扩展了.myButton类，所以我只需要申请如.myButton-ok和所有其他基础按钮样式保持？

来源

2013-04-07 membersound

将一个额外的类添加到按钮才能生效。像这样的东西 -

.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-07 19:04:20 Vector

CSS不能这样工作。它不使用继承perse ...它使用基于选择器的特性来重写属性的级联。要做到这一点的唯一方法就是使用像LESS或SASS这样的预处理器，在那里你可以扩展它们。

与原始的CSS我会分配两个类的按钮与默认样式，然后按钮与特定的样式。

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

来源

2013-04-07 19:01:36 prodigitalson

+1对于LESS/SASS。这是他们尝试解决的CSS缺点之一。 – 2013-04-07 19:02:55

因为我使用gwt不幸的是我必须使用原始的CSS ... – membersound 2013-04-07 19:03:16

在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-07 19:04:22

在CSS中的“实力”顺序是这样的：

内嵌样式> class> id。

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

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

，并为您的OK按钮，你定义一个内联样式（在HTML）：

style="background:green"

或者，你总是可以定义一个特定的每个按钮ID的风格，但只是改变颜色我认为这是overkilled：

#myButton-ok{ background: green};

来源

2013-04-07 19:11:30

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

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

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

.ok { 
    background: green; 
} 

.warn { 
    background: orange; 
}

和标记如<button class="button warn">。这意味着该元素属于两个类，并且具有适用于它们的声明。在这种情况下，如果同一个属性的两个声明适用于一个元素，则后者的声明（即后面在样式表中出现的声明）胜出，这与其他事物相同变得相关。

来源

2013-04-07 19:19:41

css继承如何正确工作？

回答

相关问题