css 在一个规则内,将多个类作为目标元素

wooyq4lh  于 2023-05-08  发布在  其他
关注(0)|答案(2)|浏览(143)

我有一些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);
}
u0sqgete

u0sqgete1#

.border-blue.background { ... }用于两个类一起使用时。

  • 只针对第一个 *
<div class="border-blue background"></div>
<div class="border-blue"></div>
<div class="background"></div>

.border-blue, .background { ... }是两个类中的一个。

  • 两个目标都有 *
<div class="border-blue"></div>
<div class="background"></div>

.border-blue .background { ... }用于其中'.background'是'. border-blue'的子元素。

  • 仅针对第二个'.background'元素 *
<div class="border-red">
    <div class="background"></div>
</div>
<div class="border-blue">
    <div class="background"></div>
</div>

参见Chris' answer以获得更全面的解释。另请参阅CSS Combinators上的W3 Docs

e5nqia27

e5nqia272#

以防有人像我一样偶然发现了这一点,并且没有意识到,上面的两个变体是针对不同的用例的。
以下:

.blue-border, .background {
    border: 1px solid #00f;
    background: #fff;
}

用于向具有蓝色边框或背景类的元素添加样式,例如:

<div class="blue-border">Hello</div>
<div class="background">World</div>
<div class="blue-border background">!</div>

都将得到蓝色边框和白色背景应用于它们。
然而,公认的答案是不同的。

.blue-border.background {
    border: 1px solid #00f;
    background: #fff;
}

这会将样式应用于同时具有两个类的元素,因此在本例中,只有同时具有两个类的<div>应该应用样式(在正确解释CSS的浏览器中):

<div class="blue-border">Hello</div>
<div class="background">World</div>
<div class="blue-border background">!</div>

所以基本上可以这样想,逗号分隔适用于 one class OR another class 的元素,点分隔适用于 one class AND another class 的元素。

相关问题