CSS优先级和针对特定元素

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

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

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

要计算特异性,可以将选择器视为四个数字的组合,所有数字都从(0,0,0,0)开始

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

也:

• 该通用选择 *有一个选择特异性没有影响.
• 组合子喜欢+,~并且>也对特异性没有影响.
• !important规则几乎总是优先; 虽然它们不会影响与选择器特异性相关的四个数字.只有另一个!important规则可以覆盖先前定义的规则.例外情况是先前定义的!important规则具有更具体的选择器.这里,适用正常的特异性规则(如上所述).