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

wooyq4lh 于 2023-05-08 发布在其他

关注(0)|答案(2)|浏览(144)

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

2条答案

.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'的子元素。

<div class="border-red">
    <div class="background"></div>
</div>
<div class="border-blue">
    <div class="background"></div>
</div>

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

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

.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 的元素。