'Text-decoration: none' 在 Bootstrap 中不起作用

Question

悬停时，我的文本链接带有下划线。这是 Bootstrap 中的默认设置。

我想保留这个，除非链接在某个 div 内。

我试过的代码（以及几种变体）不起作用。

HTML：

         <div class="wall-entry span5">
            <a href="">
            <img src="http://www.placehold.it/290x163" />
            <div class="wall-address">
                <p>Burgundy Street</p>
                <p>New Orleans, LA</p>
                <p>USA</p>
            </div>
            </a>
        </div>

我的CSS：

 .wall-entry     {
                background-color: @black;
                position: relative;

            img {
                opacity:0.4;
                filter:alpha(opacity=40); /* For IE8 and earlier */
                }

            div {
                position: absolute;
                left: 10px;
                bottom: 10px;
                p   {
                    line-height: 18px;
                    margin: 0;
                    font-family: Neuzit Heavy;
                    font-size: 18px;
                    color: white;
                    text-decoration: none;
                    }
                }
            }

div.wall-entry:hover img    {
                            opacity:1;
                            filter:alpha(opacity=100); /* For IE8 and earlier */
                            }

a div.wall-entry {text-decoration: none;}

快速说明：我已经测试过 a {text-decoration: none;} ，这确实有效。但是，我不想改变一切。只是这个特定案例中的链接。

原文由 Olly F 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

将字体系列放在涉及多个单词的字体的引号中，首先：

font-family: "Neuzit Heavy", sans-serif;

然后在 a 下面放 .wall-entry a:hover { text-decoration: none; }

你把顺序调过来了。您定位的项目应该在右边。例如，

.wrapper .header a 英文意思是“定位.header，.wrapper 内的所有锚链接”

原文由 Tallboy 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

问题实际上是由 Twitter Bootstrap 的 CSS 文件引起的，而不是您的代码。

Twitter Bootstrap 的 CSS 文件（bootstrap.min.css 是我项目的罪魁祸首）多次为链接添加下划线。当他们悬停在上面时，当他们专注时，它会给他们一个下划线，甚至让他们变成蓝色。

在我的项目中，我专门为锚标签内的文本分配了自己的颜色，并且浏览器正确地呈现了它们的颜色，就像我分配它们一样，但是，由于文本被包裹在锚标签中，蓝色下划线来自Twitter Bootstrap 样式表仍然出现在我所有样式文本的下方。

我的解决方案：打开 bootstrap.min.css（或任何你的 Bootstrap 样式表）并搜索术语“underline”，每当你在锚标记选择器中找到“text-decoration: underline”时，如下所示：

 a:hover, a:focus {
  color: #2a6496;
  text-decoration: underline;
}

或这个：

       a, a:visited {
    text-decoration: underline;
  }

您应该继续删除颜色和文本装饰规则。

那解决了我的问题。

原文由 Cameron Newland 发布，翻译遵循 CC BY-SA 3.0 许可协议