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繼承如何正確工作？

回答

相關問題