CSS/Bootstrap 3:从链接中删除样式

Question

我试图从以下行中的链接(锚标签)中删除样式,以便链接显示为黑色,默认情况下不下划线.出于某种原因,我的CSS类(" deco-none")在这里被忽略,它们仍然以蓝色显示为普通链接(我使用的是IE9和Boostrap 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中弄错了.试试这个

小提琴

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>