CSS 优先顺序奇怪 - “#id tag” > “#tagId” 为什么？
CSS Precedence Oddity - "#id tag" > "#tagId" Why?
我发现 #id 中 element 的选择器优先于 element 的 #id 的选择器是非常不合逻辑的。
免责声明：我知道周围有很多类似的问题。我还阅读了 CSS 优先级和特异性文档。然而 none 这些问题和文档似乎涵盖了我遇到的这个具体问题，更不用说解释原因了。也许我只是不擅长搜索；在那种情况下，请指导我。但是我跑题了。
例如，取下面的HTML：
<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）进行了测试。
基本上 #id1 element 本身比 #id2 更具体。
特异性是累加的，添加的越多（通常）选择器的特异性就越高。
在您的示例中，#top 和 #button 具有相同的特异性，一旦您向其中一个选择器添加更多信息，它就会变得更加具体。因此 #top button 本身比 #button 更具体。
specificity complete with great cheat sheet 上有一篇很棒的文章。
例如，假设您有 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 具有相同的特异性。然而，因为 button#myButton 是最后声明的，所以它被应用。
您也无意中发现了很多 developers 建议您 不要 使用 ids 进行样式设计并且基本上应该使用 类 代替。
现在我对 CSS 特异性的理解稍微好一些，我只想直接回答我最初的一些问题，这些问题已由 Jon P 隐含地回答，希望让未来的读者的生活稍微轻松一些。
总是选择唯一元素的#myButton 不是比选择唯一元素下的多个按钮的#top 按钮更具体吗？
从逻辑上讲，是的，应该更具体。但是 CSS 解释器并不这样看：它只是简单地添加了每个选择器的特殊性，根本不关心元素的结构。阅读 Jon P 的回答了解详情。 "#top"="#myButton", 因此 "#top button" > "#myButton".
这是错误还是预期的功能？
一个预期的功能，尽管是一个有问题的功能。 CSS 为简单起见，以这种方式设计特异性。
跨浏览器的这种行为有多标准？
想必，非常。因为它是规范的一部分，所以正确实现的解释器都应该以这种方式运行。
如果是功能，为什么？
同样，它的设计方式是为了简单起见。然而，据 BoltClock 称，这一选择是 CSS 工作组感到遗憾的选择，因为它造成了复杂性。但是没有时间机器，所以我们现在受困于这个不完美的系统。为避免这种混乱，只需不要使用 id 进行样式设置。
我发现 #id 中 element 的选择器优先于 element 的 #id 的选择器是非常不合逻辑的。
免责声明：我知道周围有很多类似的问题。我还阅读了 CSS 优先级和特异性文档。然而 none 这些问题和文档似乎涵盖了我遇到的这个具体问题，更不用说解释原因了。也许我只是不擅长搜索；在那种情况下，请指导我。但是我跑题了。
例如，取下面的HTML：
<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）进行了测试。
基本上 #id1 element 本身比 #id2 更具体。
特异性是累加的，添加的越多（通常）选择器的特异性就越高。
在您的示例中，#top 和 #button 具有相同的特异性，一旦您向其中一个选择器添加更多信息，它就会变得更加具体。因此 #top button 本身比 #button 更具体。
specificity complete with great cheat sheet 上有一篇很棒的文章。
例如，假设您有 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 具有相同的特异性。然而，因为 button#myButton 是最后声明的，所以它被应用。
您也无意中发现了很多 developers 建议您 不要 使用 ids 进行样式设计并且基本上应该使用 类 代替。
现在我对 CSS 特异性的理解稍微好一些，我只想直接回答我最初的一些问题，这些问题已由 Jon P 隐含地回答，希望让未来的读者的生活稍微轻松一些。
总是选择唯一元素的#myButton 不是比选择唯一元素下的多个按钮的#top 按钮更具体吗？
从逻辑上讲，是的，应该更具体。但是 CSS 解释器并不这样看：它只是简单地添加了每个选择器的特殊性，根本不关心元素的结构。阅读 Jon P 的回答了解详情。 "#top"="#myButton", 因此 "#top button" > "#myButton".
这是错误还是预期的功能？
一个预期的功能，尽管是一个有问题的功能。 CSS 为简单起见，以这种方式设计特异性。
跨浏览器的这种行为有多标准？
想必，非常。因为它是规范的一部分，所以正确实现的解释器都应该以这种方式运行。
如果是功能，为什么？
同样，它的设计方式是为了简单起见。然而，据 BoltClock 称，这一选择是 CSS 工作组感到遗憾的选择，因为它造成了复杂性。但是没有时间机器，所以我们现在受困于这个不完美的系统。为避免这种混乱，只需不要使用 id 进行样式设置。