CSS选择器的级联/优先级未按预期工作

Question

CSS选择器的级联/优先级未按预期工作

3

细节

我在使用FirefoxDeveloperEdition时遇到了意想不到的选择器优先级问题。我阅读了Smashing Magazine文章 "CSS Specificity: Things You Should Know" ，据我所知，已经按照应有的规则为每个CSS选择器构建了特定级别的优先级。然而，错误的声明被取消了。

问题出在哪里？是我对选择器特异性的工作原理没有完全掌握吗？这是一个bug吗？还是其他什么原因？

项目代码（简化版）

/index.html

<head>
  <link href="css/style.css">
</head>
<body>
  <section class="hud">
    <section class="main float-l">
      <a href="#0" class="button">
        <div class="outer container">
          <div class="inner container">
            <p class="show"> <!-- This text is meant to be white by the style declared at line 159. But, it's grey by line 61. -->
              View Details
            </p>
            <div class="arrow"></div>
            <p class="hide"> <!-- This text is meant to be white by the style declared at line 159. But, it's grey by line 61. -->
              Hide Details
            </p>
          </div>
        </div>
      </a>
    </section>
  </section>
</body>

/css/style.css

58  .hud > .main p /* I also tried `.hud > .main p:not(.button)` */
59    {
60      vertical-align:   middle;
61      color:            #7C7C7C; /* This grey is applied of the white of line 159. */
62    {

...

155 .hud > .main > .button
156   {
157     display:          block;
158     background-color: #986B99;
159     color:            #FFFFFF; /* This white should be applied, but is overridden by the grey of line 61. */
160     height:           36px;
161     margin:           20px 10px 10px;
162     padding:          8px 20px;
163     font-weight:      400;
164     text-decoration:  none;
165     text-transform:   uppercase;
166     border-radius:    2px;
167   }

检查器

尝试使用.hud > .main > .button与.hud > .main p进行比较
Firefox dev tools inspector showing overridden CSS

还尝试使用.hud > .main > .button与.hud > .main p:not(.botton)进行比较
Firefox dev tools inspector showing overridden CSS

- tjfwalker

1

你期望的结果是什么？实际结果又是什么？你还没有告诉我们这个关键部分。此外，一个JSFiddle示例会非常有帮助。 - TylerH

@TJWalker他的目标是p:not(.button)，并期望这会改变他的按钮颜色？ - Chad

@Chad 我想我明白你的意思了。但是，p是.button的后代而不是子元素，那么在.hud > .main p:not(.button)中，p之间有a和.main，这会有什么影响呢？ - tjfwalker

你在文章开头花费了几个句子来描述我期望的问题“细节”，但实际上只是具体性应该如何工作的细节。然后在接下来的文章中，你就没有更多的散文了。我的观点仍然存在; 在查看你的代码之前，我们需要知道你期望的结果是什么。 - TylerH

@TylerH 无论你说什么，伙计。随意编辑帖子并展示给我应该如何做。感谢反馈。 - tjfwalker

显示剩余8条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- MarcinJuraszek · Accepted Answer

这是因为第一个样式匹配元素，而第二个样式是从其父级继承的。

当两个选择器匹配同一元素时，特异性才会起作用。但不适用于从父元素继承样式。

您可以在非常简单的示例中看到：

#myID {
  color: red;
}

p {
  color: green;  
}

<div id="myId">
  <p>Some text</p>
</div>

尽管#myId更具体，但文本仍然是绿色的，因为p选择器直接匹配该元素，因此比从div继承的color更重要。

要使.button内部的p元素变为白色，您需要：

.hud > .main > .button p {
    color: #fff;
}