直到几分钟前,我还确信选择器“距离”会影响将应用的 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 列网格上下文。
最佳答案
在这种特定情况下,您可以使用子选择器:>
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
是孙子时有效。
关于css - 我如何让 CSS 类的优先级受到 "more closely"里面的哪个类的影响?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32657810/