css - 我如何让 CSS 类的优先级受到 "more closely"里面的哪个类的影响？

Question

直到几分钟前，我还确信选择器“距离”会影响将应用的 CSS 样式。这是我所说的距离的意思:

.class-2 .target {
    background-color: green;
}

.class-1 .target {
    background-color: red;
}

<div class="class-1">
    <div class="class-2">
        <p class="target">Hello World!</p>
    </div>
</div>

在这个例子中，我想我希望 .target 元素有一个绿色的背景色——因为它看起来像 .class-2 .target 风格更具体——至少，target 比第 1 类更接近第 2 类。但事实并非如此。显然，唯一影响优先级的是它们被声明的顺序。

这对我来说真的很奇怪；我想我假设 CSS 规则是从外到内应用的，或者至少这是一个因素。

当我需要根据更接近内部的类来应用类样式时，我该怎么办。有什么办法吗？

例如，在这个 JSFiddle 中，我如何让背景适本地变成红色和绿色？ https://jsfiddle.net/emsca2ww/3/

在我的特定情况下，我需要它，因为我通常使用 12 列网格，并且我需要(在某些情况下)在其中设置 16 列网格上下文。

Answer 1

在这种特定情况下，您可以使用子选择器:>

https://jsfiddle.net/emsca2ww/7/

.class-2 > .target {
    background-color: green;
}

.class-1 > .target {
    background-color: red;
}

这只适用于父/子元素。否则，如果需要，您将不得不引入更多的父/子关系，或者重新考虑如何使用选择器。

选择器具有特异性和级联顺序。上述选择器具有相同的特异性，因为它们都由两个类组成。这又回到了级联顺序。它们也存在于同一个样式表中，因此应用最终优先级规则:CSS 文档中的顺序。

如果您希望 .class-2 的优先级高于 .class-1，您必须在样式表中将选择器移动到它之后:

.class-1 .target {
    background-color: green;
}

.class-2 .target {
    background-color: red;
}

然而，这与 HTML 本身无关。 HTML 文档中没有父子关系的选择器。你可以这样做:

.class-2 > * > .target

但是这个选择器仅在 .target 是孙子时有效。