4

我的问题应该很明确。出于某种原因，我今天无法绕开它。

我正在制作一个结构像这样的菜单

<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”元素？

4

5 回答 5

11

为什么第二个选择器会优先于第一个选择器？

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

要计算特异性，请将选择器视为由四个数字组成，所有数字都从(0,0,0,0)开始

  • 内联样式具有最高的特异性，将取代第一个数字(1,0,0,0)。
  • ID 算作第二个数字(0,1,0,0)
  • 类、伪类（除了:not()）和属性选择器算作第三个数字（0,0,1,0）
  • 类型选择器和伪元素 - 例如div {}或::after{} 计为第四个(0,0,0,1)

还：

于 2013-05-08T16:18:49.480 回答
3

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) 更高，因此优先

于 2013-05-08T16:19:15.657 回答
1

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

li.inner a{}

它应该工作。

编辑：

我知道我之前回答过这个问题：为什么我的 HTML 不使用 CSS 中定义的最后一个样式？

于 2013-05-08T16:16:19.257 回答
0

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

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

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

于 2013-05-08T16:41:05.113 回答
0

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

那么什么能获得特异性呢？

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

于 2013-05-08T16:25:26.410 回答