CSS优先级和针对特定元素

我的问题应该是相当困难的。出于某种原因，我今天无法将头围住它。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{}

的选择工作，但是以下选择器正在接受css的主持，并且重写上述选择器：

li.menu-item a{}

我完全困惑。为什么第二个选择器会在第一个选择时使用样式偏好？你们如何推荐我瞄准上述“a”元素？

来源

2013-05-08 Alex Ritter

哪个选择器最后？ – j08691 2013-05-08 16:15:23

@ j08691没关系，具有两个类型选择器和一个类选择器的规则无论顺序如何都会跳过一个具有一个和一个类选择器的规则。阅读[CSS特性]（http://www.w3.org/TR/selectors/#specificity）。 – robertc 2013-05-08 16:19:18

@robertc - 谢谢，但我知道所有关于CSS的特殊性。我只是在问一个问题。 – j08691 2013-05-08 16:20:17

为什么会第二选择需要的风格偏好？

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

要计算的特殊性，认为一个选择四个数字的consiting，都开始（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.这里，正常的特异性规则（如上所述）适用。

来源

2013-05-08 16:18:49 Adrift

感谢您的详细信息。关于CSS的信息我显然需要存储。 – 2013-05-08 16:33:08

这是因为li.menu a包含三个部分来标识元素：父元素（li），父类（menu-item）和元素（a）。你想要的选择器只有两个，所以你可以修改它为：

li.inner a{}

它应该工作。

编辑：

我知道我回答了这个前：在第一Why does my HTML not use the last style defined in the CSS?

来源

2013-05-08 16:16:19 Maloric

感谢您的提示。以下选择器正在为我工作，div.inner a {} – 2013-05-08 16:22:05

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）

so y我们的第一个选择器的得分为（0,0,1,1），而第二个选择器的得分为（0,0,1,2），因此优先级高于

来源

2013-05-08 16:19:15 Trey

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

那么什么是特异性？

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

在您的例子： .inner一个是11分

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

li.menu项目一个是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-08 16:25:26

您可以将CSS仅适用于每一个元素中的锚，是这样的：

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

这样做，这样，规则“li.menu项目是”不会在干涉其他主播。

来源

2013-05-08 16:41:05

CSS优先级和针对特定元素

回答

相关问题