两个css规则“看似”具有相同的特异性权重，但不会产生相同的结果

Question

好吧，我试着把CSS的级联和特异性理解为一门“科学”，并不总是把它留给“命中或失败”的方法。我希望有人能帮帮我。

我有一个规则：

.bluebutton {margin: 0 10px 6px 0;} /* rule 1 */

我需要重写以更改特定实例中的页边距。

所以我在div中添加了一个class，并写道：

.aside-right .bluebutton a {margin:30px 0 0 100px;} /* rule 2 */

但是，规则%2没有覆盖规则% 1。

因此，我将规则2修改为：

.aside-right a.bluebutton {margin:30px 0 0 100px;} /* rule 3 */

它覆盖了".bluebutton“规则。/*规则1 */

一开始，我写了这个HTML

 <a class="blueButton aside-right" href="enrollNow.html"><span>Enroll Now</span></a> <!-- html-1 -->

然后，我修改了按钮并将其包含在div中，并写道：

<div class="aside-right"><a class="blueButton" href="enrollNow.html"><span>Enroll Now</span></a></div> <!-- html-2 -->

html-2与规则3一起工作。

有人能帮我理解一下为什么规则3覆盖了规则1，规则2没有覆盖规则1吗？看起来规则2和规则3(在我看来)具有相同的权重。是不是因为规则2针对class为.bluebutton和.aside的任何元素中的任何anchor标记，而规则3仅针对class为.bluebutton的anchor标记？我希望我已经清楚地解释了我想要理解的东西。

谢谢!

Answer 1

规则1

.bluebutton将以任何具有bluebutton类的元素为目标。

规则2

.aside-right .bluebutton a的目标是嵌套在带有class="bluebutton"的元素中的锚元素，嵌套在带有class="aside-right"的元素中的锚元素。示例结构：

<div class="aside-right">
    <div class="bluebutton">
        <a href="#">link</a>
    <div>
<div>

规则3

.aside-right a.bluebutton将以任何嵌套在带有class="aside-right"的元素中的class="bluebutton"锚点为目标。示例结构：

<div class="aside-right">
    <a class="bluebutton" href="#">link</a>
<div>

Answer 2

规则2没有选择与规则1相同的元素。

规则1选择任何具有bluebutton类的元素

规则2选择具有bluebutton类的元素的后代的<a>元素，这些元素是具有aside-right类的元素的后代，而具有bluebutton类的html元素没有<a>后代

Answer 3

.bluebutton a和a.bluebutton不是等价的。第一个方法查找在中为的a元素，这是一个具有bluebutton类的元素。第二个方法查找a元素和类bluebutton的元素。