CSS /引导程序3：从链接中删除样式

Question

我正在尝试从以下几行的链接（锚标签）中删除样式，以使链接默认显示为黑色，并且没有下划线。由于某种原因，这里忽略了我的CSS类（“ deco-none”），它们仍然以蓝色显示为正常链接（我使用的是IE9和Bootstrap 3）。

我必须在这里更改什么？

我的HTML：

<div class="row" style="width:400px;">
    <ul class="list-unstyled col-md-4">
        <li class="bg-menu clickable"><a href="#" class="deco-none">test1-1</a></li>
        <li class="bg-menu clickable"><a href="#" class="deco-none">test1-2</a></li>
        <li class="bg-menu clickable"><a href="#" class="deco-none">test1-3</a></li>
    </ul>
    <ul class="list-unstyled col-md-4">
        <li class="bg-menu clickable"><a href="#" class="deco-none">test2-1</a></li>
        <li class="bg-menu clickable"><a href="#" class="deco-none">test2-2</a></li>
        <li class="bg-menu clickable"><a href="#" class="deco-none">test2-3</a></li>
    </ul>
    <ul class="list-unstyled col-md-4">
        <li class="bg-menu clickable"><a href="#" class="deco-none">test3-1</a></li>
        <li class="bg-menu clickable"><a href="#" class="deco-none">test3-2</a></li>
        <li class="bg-menu clickable"><a href="#" class="deco-none">test3-3</a></li>
    </ul>
</div>

我的CSS：

a.deco-none: {
    color:#000000 !important;
    text-decoration:none;
}

.bg-menu:hover {
    background-color:#0079C1;
    color:#FFFFFF;
}

.clickable {
    cursor:pointer; 
}

Answer 1

您在CSS中弄错了。试试这个

FIDDLE

a.deco-none {
    color:#000000 !important;
    text-decoration:none;

}

.bg-menu:hover {
    background-color:#0079C1;
    color:#FFFFFF;
}

.clickable {
    cursor:pointer; 
}

以下代码错误

a.deco-none: {
    color:#000000 !important;
    text-decoration:none;
}

Answer 2

我建议使用inherit关键字来继承父级颜色。我知道您想让他们变黑，但我相信其他用户也会发现它有用。

a.deco-none {
    color: inherit;
    text-decoration:none;
}

正如Dimitry K所说，您有a.deco-none:错字。

Answer 3

使其完整（在悬停时或单击它时也不会更改颜色，并且也继承text-decoration：]

.deco-none {
  color: inherit;
  text-decoration: inherit;
}

.deco-none:link {
  color: inherit;
  text-decoration: inherit;
}

.deco-none:hover {
  color: inherit;
  text-decoration: inherit;
}

示例片段

.deco-none {
  color: inherit;
  text-decoration: inherit;
}
.deco-none:link {
  color: inherit;
  text-decoration: inherit;
}
.deco-none:hover {
  color: inherit;
  text-decoration: inherit;
}
.bg-menu:hover {
  background-color: #0079C1;
  color: #FFFFFF;
}
.clickable {
  cursor: pointer;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="row" style="width:400px;">
  <ul class="list-unstyled col-md-4">
    <li class="bg-menu clickable"><a href="#" class="deco-none">test1-1</a>
    </li>
    <li class="bg-menu clickable"><a href="#" class="deco-none">test1-2</a>
    </li>
    <li class="bg-menu clickable"><a href="#" class="deco-none">test1-3</a>
    </li>
  </ul>
  <ul class="list-unstyled col-md-4">
    <li class="bg-menu clickable"><a href="#" class="deco-none">test2-1</a>
    </li>
    <li class="bg-menu clickable"><a href="#" class="deco-none">test2-2</a>
    </li>
    <li class="bg-menu clickable"><a href="#" class="deco-none">test2-3</a>
    </li>
  </ul>
  <ul class="list-unstyled col-md-4">
    <li class="bg-menu clickable"><a href="#" class="deco-none">test3-1</a>
    </li>
    <li class="bg-menu clickable"><a href="#" class="deco-none">test3-2</a>
    </li>
    <li class="bg-menu clickable"><a href="#" class="deco-none">test3-3</a>
    </li>
  </ul>
</div>