CSS迫使一個div遵循類

Question

所以我有如下一個CSS腳本一個div，在這個腳本它的定義如下：

#div { height: 30px; width: 30px; float:left;} 

我需要的div屬性，但爲它而不是浮到正確和計劃這樣做使用一個類：

.class {float: right} 

然而，這不起作用（它仍然浮動到左邊）。

有沒有一種方法可以迫使div在它自己的預定屬性上跟隨這個類？

Answer 1

您遇到了CSS specificity問題。

與class選擇器相比，id選擇器具有更高的特異性，因此它的值不能僅使用class選擇器覆蓋。

有兩種方法來覆蓋id選擇的屬性：

1. 使用!important後綴強制瀏覽器來選擇class屬性值。但是，使用!important有它自己的set of problems。
2. 更好的解決方案是使用multi-selector syntax來定位你想要的樣式。

例如，

<p id="foo" class="bar"> 
Hello 
</p> 

CSS：

#foo { color: red; } 
.bar { color: green !important; } /* avoid */ 
#foo.bar { color: yellow; } /* multi selector*/ 

見我如何使用!important或multi-selectorjsfiddle link。