html - CSS !important 规则不覆盖文本对齐

Question

a {
        font-size: 8pt;
        text-align: left !important;
        text-decoration: none;
  }

.main {
        text-align: center;
  }

 <div class="main">
    <a href="#new_york_city">New York City</a><br />
    <a href="#long_island">Long Island</a><br />
    <a href="#upstate">Upstate New York</a><br />
</div>

这是我所拥有的精简版，对我来说，使用 Firefox 5，链接仍然居中，即使我在“text-align: left”上使用 !important。这令人困惑和恼火，因为我认为 !important 是最高的特异性并且覆盖了所有其他规则。

这里有什么问题吗？

Answer 1

需要在 anchor 链接的父元素上设置文本对齐方式，你不能告诉 anchor 链接向左对齐，因为它的宽度是固定的。您需要从 .main 部分中删除 text-align:center; ，或者将另一个类添加到 div 中，例如 'alignLeft' 并使用 !important 应用对齐统治那里。