只是想知道何时在一个元素上使用多个类,例如
class="foo bar"
,这些类的设置如下:
.foo {
margin-right: 10px;
}
.bar {
margin-right: 0px;
}
哪个班会有特殊性? margin 是 10px 还是 0px?
它基于 CSS 中的优先级工作。因此,最近出现的项目将覆盖任何以前的样式。
案例一
.red { background : red; }
.blue { background : blue; }
class = 'red blue'
在这种情况下会是 blue。
案例二
.blue { background : blue; }
.red { background : red; }
class = 'blue red'
在这种情况下会是 red。
此外,如果您希望定位具有 only 两个类的元素,您可以使用以下语法:
<ul>
<li class="foo first">Something</li>
<li class="foo">Somthing else</li>
<li class="foo">Something more</li>
</ul>
.foo {
color: red;
}
.foo.first {
color: blue
}
单个类名具有相同的权重。在这种情况下,第一个列出的规则将被第二个覆盖,因此,元素将具有
margin-right: 0px;
这里是一个简单的例子,使用
color
而不是边距,因为它更容易可视化。 bar
中指定的值将由浏览器选择。
此外,更“具体”的类将覆盖更通用的类:
HTML:
<div class="foo"> <div class="bar">Hello World!</div> </div>
使用以下 CSS:
.foo .bar { margin-left:25px }
.bar { margin-left:0px }
注意内部 div 仍然有 25px 的左边距吗?
此外,在提供值后阅读“!重要”参数:
.bar { margin-left:0px!important }
退房