CSS!重要规则不会覆盖文本对齐

Mat*_*ell 6 html css layout css-specificity

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>
Run Code Online (Sandbox Code Playgroud)

这是我拥有的一个紧凑版本,对我来说,使用Firefox 5,链接仍以STILL为中心,即使我正在使用!重要的是"text-align:left".令人困惑和恼人,因为我认为!重要的是最高的特异性并超越所有其他规则.

这有什么不对?

Tom*_*ers 5

需要在锚链接的父元素上设置文本对齐,您不能告诉锚链接将自身对齐到左边,因为它具有固定宽度.您需要text-align:center;从.main部分中删除,或者将另一个类添加到div中,如'alignLeft',并在!important那里应用与规则的对齐.