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中弄错了。试试这个

<强> 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;
}

示例代码段

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

3 个答案:

示例代码段