1

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

我有一个规则：

.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以 a of和anchor的任何元素内的任何标签为目标，而规则 3 仅以a of 为目标吗？我希望我能清楚地解释我想要理解的内容。class.bluebutton.asideanchorclass.bluebutton

谢谢！

4

3 回答 3

5

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

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

规则 2从 html 中的class 元素中选择没有后代<a>元素bluebutton的元素的后代元素aside-rightbluebutton<a>

于 2012-08-26T02:54:14.460 回答
1

.bluebutton a并且a.bluebutton不等价。第一个查找在具有 class 的元素a内的bluebutton元素。第二个查找属于class的元素的a元素。bluebutton

于 2012-08-26T02:58:34.587 回答
1

规则 1
.bluebutton将针对任何具有 class 的元素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="bluebutton"嵌套在带有class="aside-right". 示例结构：

<div class="aside-right">
    <a class="bluebutton" href="#">link</a>
<div>
于 2012-08-26T03:01:21.133 回答