Html CSS优先级和针对特定元素

我的问题应该是直截了当的。由于某种原因，我今天不能专心思考

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

<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{}

li.menu-item a{}

---

我完全困惑不解。为什么第二个选择器比第一个选择器具有样式首选项？你们建议我如何定位上述“a”元素？

这是因为li.menu a包含三个部分来标识元素：父元素（li）、父类（菜单项）和元素（a）。您想要的选择器只有两个，因此您可以将其修改为：

li.inner a{}

它应该会起作用

编辑：

我知道我以前回答过这个问题：

为什么第二个选择器比第一个选择器具有样式首选项

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

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

• 内联样式具有最高的特异性，将取代第一个数字（1,0,0,0）
• ID的计数作为第二个数字（0,1,0,0）
• 类（），并计为第三个数字（0,0,1,0）
• 和伪元素-例如

  div{}

  或

  ：{}

  之后的第四个（0,0,0,1）

此外：

• *

  对选择器的特异性没有影响
• 与

  +

  一样，

  ~

  和
  也对特异性没有影响
• 规则几乎总是优先；虽然它们不影响与选择器关联的四个数字。只有另一个

  ！重要信息

  规则可以覆盖以前定义的规则。在这里，特异性的正常规则（如上所述）适用

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）更高，因此具有优先权

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

那么，什么能带来特殊性呢

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

在您的示例中： .内线a得11分

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

菜单项a是12分

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

这就是为什么第二个将是显示的内容。要显示正确的样式，只需使其更加具体，例如使用 .菜单项.内部a

这里有一篇关于这方面的很好的文章。

---

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

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

---

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

哪一个选择器排在最后？@j08691不要紧，一个有两个类型选择器和一个类选择器的规则胜过一个有一个和一个类选择器的规则，不管顺序如何。请继续阅读。@robertc-谢谢，但我知道CSS的所有特性。我只是在问一个问题。在排队的时候，{}内线排在最后。谢谢你的提示。下面的选择器为我工作，div.inner a{}谢谢你的详细帖子。关于CSS的信息我显然需要储存起来。