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

Question

好吧,我正在尝试将CS​​S级联和特异性理解为"科学",而不是总是将其视为"命中或错过"方法.我希望有人会帮助我.

我有一条规则:

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

我需要覆盖以更改特定实例中的边距.

所以我添加了一个class到div写道:

.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 -->

然后我修改并包含a中的按钮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个目标的任何anchor标记与任何元素中class的.bluebutton和.aside,但规则只3个目标anchor标签用class的.bluebutton？我希望我解释了我想要清楚理解的内容.

谢谢!

Answer 1

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

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

规则2选择作为<a>元素后代的元素,bluebutton这些元素是具有类的元素的后代aside-right,来自具有类的html元素bluebutton没有<a>后代