CSS强制div跟随类

Question

所以我有一个跟随CSS脚本的div，在这个脚本中它定义如下：

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

我需要divs属性，但是它要向右浮动并计划使用类来执行此操作：

.class {float: right}

然而这不起作用（它仍然向左浮动）。

有没有办法强制div在自己的预定属性上跟随类？

Answer 1

您遇到了CSS specificity问题。

与id选择器相比，class选择器具有更高的特异性，因此仅使用class选择器无法覆盖其值。

有两种方法可以覆盖id选择器的属性：

1. 使用!important后缀强制浏览器选择类属性值。但是，使用!important使用set of problems。
2. 更好的解决方案是使用multi-selector syntax来定位要设置样式的div。

例如，

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

CSS：

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

请参阅我的jsfiddle link，了解如何使用!important或multi-selector。