Question

我想使CSS样式比其他样式具有更高的优先级。

我要具有更高优先级的css规则是#an-id *。这是一个CSS选择器，用于选择下面的所有元素。我在其下面的元素上有一个类，例如.my-class-name，并且不会获得优先级。这项工作是否有效：#an-id * .my-class-name？还是我应该这样做：#an-id .my-class-name？

Answer 1

您提供的两个选项定位不同。

#an-id * .my-class-name

将为您提供所有具有一个名为“ .my-class-name”的子代的an-id子代子元素

#an-id .my-class-name

将为您提供所有名为“ .my-class-name”的子元素

所以

<div id="an-id"><div class=".my-class-name">test</div></div>

这不会在第一条规则中设置样式，而将在第二条规则中设置样式。

此外，我强烈建议您使用SASS / SCSS。这使它变得更容易！

Answer 2

阅读有关CSS特殊性的这篇文章：https://css-tricks.com/specifics-on-css-specificity/

对于每个类值（或伪类或属性选择器），应用0、0、1,0点

通用选择器（*）没有特定值（0,0,0,0）

您的示例#an-id * .my-class-name是错误的，因为它将定位.my-class-name内每个元素内的所有#an-id元素（因此至少向下两个级别），但是实际上您的{{1 }}元素比.my-class-name低一级。要解决此问题，只需使用#an-id（不带星号）。

由于#an-id .my-class-name的得分为#an-id .my-class-name，而0,1,1,0的得分为#an-id *，因此这将覆盖您的0,1,0,1样式规则。

请参见this example。

CSS样式的最高优先级

2 个答案: