html - 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 后缀强制浏览器选择类属性值。然而，使用 !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。