CSS中的选择器正在影响其他元素

Question

这是我的CSS代码，应该重新格式化链接：

a {
color: #120000;
text-decoration: underline;
}

这是我的HTML代码：

<div id="intro" class="grid_9">
     <h1>This site just might change your life</h1>
     <p><a href="#" class=button>Browse Our Features</a></p>
</div>

问题是标题（但只有这一个）的影响方式与链接相同。我该如何解决这个问题？

Answer 1

只需将一个类添加到不应该遵循它的<a>标记中，或者使用现有标记，具体取决于该类是否专门用于此目的。然后，使用:not()选择器：

a:not(.button) {
    color: #120000;
    text-decoration: underline;
}

小提琴： Fiddle

此外，如果标题包含在<a>标记中，则标题只会跟随<a>的CSS。如果是这样，请将<a>标记设置为集合类。