我有一些 HTML,其中包含具有多个类的元素,我需要在一个规则中分配它们,以便相同的类在不同的容器中可以不同。假设我的 CSS 中有这个:
.border-blue {
border: 1px solid blue;
}
.background {
background: url(bg.gif);
}
然后我的 HTML 中有这个:
<div class='border-blue background'>Lorum Crap No-one Cares About Ipsum</div>
我可以在单个规则中定位这些吗?例如,我知道这是行不通的:
.border-blue, .background {
border: 1px solid blue;
background: url(bg.gif);
}
最佳答案
.border-blue.background { ... }
适用于同时使用两个类的情况。.border-blue, .background { ... }
适用于任一类。.border-blue .background { ... }
用于 '.background' 是 '.border-blue' 的子项。
参见 Chris' answer以获得更详尽的解释。另见 W3 Docs关于 CSS 组合器
关于css - 在一个规则中使用多个类的目标元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5196583/