Question

我的问题应该是相当紧张的。出于某种原因，我今天无法绕过它。

我正在制作一个类似结构的菜单

<div class="wrapper">
    <ul>
        <li class="menu-item"><a href="#">Menu Item</a>
            <div class="inner">
                <a href="#">Login</a> 
            </div>
        </li>
    </ul>
</div>

我正在尝试使用以下css选择器来定位登录链接：

.inner a{}

选择器正在工作，但是下面的选择器正在使用css，并覆盖上面的选择器：

li.menu-item a{}

我完全不知所措。为什么第二个选择器会优先考虑第一个？你们怎么建议我瞄准上面的“a”元素？

Answer 1

为什么第二个选择器会在第一个选择器上采用样式首选项？

因为第二个选择器比第一个选择器更specific。第一个包含一个类和一个类型选择器，而第二个包含一个类和两个类型选择器。

要计算特异性，请将选择器视为四个数字的组合，所有数字均从（0,0,0,0）

开始

内联样式具有最高的特异性，取代第一个数字（1,0,0,0）。
ID计为第二个数字（0,1,0,0）
课程，pseudo-classes（other than :not()）和attribute selectors计为第三个数字（0,0,1,0）
Type selectors和伪元素 - 例如div {}或::after{}计为第四个（0,0,0,1）

另外：

universal selector *对选择器特异性没有影响。
Combinators如+，~和>对特异性也没有影响。
!important规则几乎总是优先;虽然它们不会影响与选择器特异性相关的四个数字。只有另一个!important规则可以覆盖之前定义的规则。 The exception is when the previously defined !important rule has a more specific selector.此处，正常的特异性规则（如上所述）适用。

Answer 2

CSS选择器附加了一个“权重”系统，

元素，伪元素：d = 1 - （0,0,0,1）
类，伪类，属性：c = 1 - （0,0,1,0）
Id：b = 1 - （0,1,0,0）
内联样式：a = 1 - （1,0,0,0）

所以你的第一个选择器得分为（0,0,1,1）而你的第二个选择器的得分为（0,0,1,2），这个得分更高，因此优先

Answer 3

这是因为li.menu a包含三个部分来识别元素：父元素（li），父类（menu-item）和元素（a）。您的预期选择器只有两个，因此您可以将其修改为：

li.inner a{}

它应该有用。

编辑：

我知道我之前已经回答过：Why does my HTML not use the last style defined in the CSS?

Answer 4

具有最高特异性的DOM对象赢得CSS优先级。

那么获得特异性的是什么？

Element Selector -- 1
Class Selector -- 10
ID Selector -- 100
Inline Selector -- 1000

在你的例子中： .inner a将是11分

a(1) + .inner(10) = 11

li.menu-item a是12分

li(1) + .menu-item(10) + a(1) = 12

这就是为什么第二个将显示的原因。要制作正确的样式秀，只需使其更具体，例如使用 .menu-item .inner a

这里有一篇非常好的文章。 http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

Answer 5

您只能将CSS应用于每个元素内的锚点，如下所示：

li.menu-item > a{}
.inner > a

这样做，“li.menu-item a”的规则不会干扰其他锚。

CSS优先级和针对特定元素

5 个答案: