“文本装饰：无”在 Bootstrap 中不起作用答案

【问题标题】：'Text-decoration: none' not working in Bootstrap“文本装饰：无”在 Bootstrap 中不起作用
【发布时间】：2012-05-10 14:16:51
【问题描述】：

悬停时，我的文本链接有下划线。这是 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;}，这确实有效。但是，我不想改变一切。仅此特定案例中的链接。

【问题讨论】：

相关：stackoverflow.com/q/11828829/923560

标签： html css twitter-bootstrap text-decorations

【解决方案1】：

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

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

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

你已经调换了顺序。您要定位的项目应该在右侧。例如，

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

【讨论】：

啊！有用。我有点误解了逻辑。我想因为我的a 在 HTML 中包裹在我的 DIV 周围，所以我必须按照构建顺序来定位它们，即在我看来，div 内没有 a。
当你说“然后在下面......”以及从那里开始时，你的意思并不是很清楚。如果你能用清晰的代码作为例子写出来，也许会更有意义。

【解决方案2】：

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

Twitter Bootstrap 的 CSS 文件（bootstrap.min.css 是我项目的罪魁祸首）多次给出链接下划线。当它们悬停在它们上方时，当它们被聚焦时，它会给它们一个下划线，甚至使它们变成蓝色。

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

我的解决方案：打开 bootstrap.min.css（或任何您的 Bootstrap 样式表）并搜索术语“下划线”，每当您在锚标记选择器中找到“文本装饰：下划线”时，如下所示：

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

或者这个：

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

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

这解决了我的问题。

【讨论】：

这个答案已经快一年了，但我想我会插话。我不推荐这种方法，因为对 Bootstrap 的更新或更改可能会导致您需要再次更改代码。相反，创建一个设置 text-decoration: none; 的类并将其添加到您的 HTML 元素中。

【解决方案3】：

这行不通

a div.wall-entry {text-decoration: none;} // Inside 'a' div with class wall-entry

但这会起作用。

div.wall-entry a{text-decoration: none;} // Inside div with class wall-entry 'a'

因为a 标签有text-decoration。

【讨论】：

【解决方案4】：

如果你的链接在 div 标签内，那么你可以这样选择你的链接：

div > a:hover {
  text-decoration:none;
}

即使使用了 boostrap，它也能正常工作。

【讨论】：