CSS优先级奇数-“ #id标签”>“ #tagId”为什么？

Question

我发现element中#id的选择器优先于该#id的{​​{1}}的选择器是不合理的。

免责声明：我知道周围有很多类似的问题。我还阅读了CSS优先级和特异性文档。但是这些问题和文档似乎都没有涵盖我遇到的这个具体问题，更不用说解释原因了。也许我只是在搜索方面很烂；在这种情况下，请指导我。但是我离题了。

例如，使用以下HTML：

element

由于某些原因，按钮没有填充。检查元素表明<style> #top button { padding: 0; } #myButton { padding: 2em; } </style> <header id="top"> <button type="button" id="myButton">Button</button> </header> 的样式已被覆盖。

不是#myButton总是选择唯一的元素，而不是#myButton更具体的元素，而#top button选择唯一元素下面的多个按钮？

这是错误还是预期的功能？跨浏览器的行为标准如何？如果有功能，为什么？

在Windows 10上使用Chrome 78和Edge 44（EdgeHTML 18）进行了测试。

Answer 1

with recursive cte as( select 1 as d union all select d + 1 from cte where d < day(last_day('2019-12-01')) ) select coalesce(day(s.date), t1.d) as Days , sum(iif(month(s.date) = 12, total, null) as December from sales s right join cte as t1 on t1.d = day(s.date) where year(date) = 2012 group by coalesce(day(s.date), t1.d) 本身比#id1 element更具体。

特异性是可加的，您添加的越多（通常），选择器就越具体。

在您的示例中，#id2和#top具有相同的特异性，一旦您向这些选择器之一添加更多信息，它就会变得更加特定。因此，#button比#top button更具体。

在specificity上有一篇很棒的文章，在cheat sheet上也很出色。

举个例子，假设您有#button并希望将颜色变为蓝色。但是对于文章中的所有article，您都希望颜色为红色。

buttons

#article1 {color:blue;}
#article1 button {color:red;}

实例中的一种选择是使用元素本身

<article id="article1">
  <p>The quick brown fox jumps over the lazy dog</p>
  <button>Button</button>
</article>

  #top button {
    padding: 0;
    color:red;
  }
  button#myButton {
    padding: 2em;
    color:blue;
  }

在此示例中，<header id="top"> <button type="button" id="myButton">Button</button> </header>和#top button具有相同的特异性。但是，由于button#myButton被最后声明，所以它被应用。

您还无意间发现了很多developers建议您不要使用id进行样式设置的原因之一，而基本上应该使用类。

Answer 2

现在，我对CSS的特殊性有了更好的了解，我只想直接回答一些由Jon P隐式回答的原始问题，以期为以后的读者提供一些便利。

#myButton总是选择唯一的元素，而不是#top按钮，后者选择一个唯一元素下的多个按钮吗？

从逻辑上讲，是的，应该更加具体。但是CSS解释器却不是这样：它只是增加了每个选择器的特异性，根本不关心元素的结构。有关详细信息，请阅读Jon P的答案。 “ #top” =“＃myButton”，因此是“ #top button”>“ #myButton”。

这是错误还是预期的功能？

一个预期的功能，尽管有问题。这样设计CSS专用性是为了简化。

跨浏览器的行为标准如何？

大概是。由于它是规范的一部分，因此正确实现的解释器都应具有这种行为。

如果有功能，为什么？

同样，它是出于简化目的而设计的。但是，由于BoltClock♦的复杂性，CSS工作组对此选择感到遗憾。但是没有时间机器，所以我们现在只能使用这个不完善的系统。为了避免这种混乱，只需不要使用id进行样式设置。