Question

我尝试设置列表组的样式，以便组项目文本没有下划线。我的部分网站已经包含

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

出于某种原因

style="text-decoration: none;"

被忽略了。

HTML：

<div class="list-group">
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">Link 1</h4>
    <p class="list-group-item-text">Info about link1. Underline this text.</p>
  </a>
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">Link 2</h4>
    <p class="list-group-item-text" style="text-decoration: none;">Info about link2. Don't underline this text.</p>
  </a>
</div><!-- list-group -->

CSS（来自我网站上的其他地方）

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

Codepen link

Answer 1

这是因为您将text-decoration: none内联样式应用于p元素。

更改为：

<a href="#" class="list-group-item" style="text-decoration: none;>
  <h4 class="list-group-item-heading">Link 2</h4>
  <p class="list-group-item-text">Info about link2. Don't underline this text.</p>
</a>

注意a标记现在如何具有样式，而不是p标记。完美运作：http://codepen.io/anon/pen/ZGMGdN

Answer 2

您可以通过CSS执行此操作。

你的CSS不起作用，因为它使用特定的伪类，其中继承的样式所处理的不仅仅是你识别的特定伪类。

您的原始代码：

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

其他样式的继承代码：

a {
    text-decoration: underline;
}

将您的代码更改为：

a {
    text-decoration: none;
}

它运作正常：http://codepen.io/anon/pen/qdMdzZ

Answer 3

您在特异性方面存在问题，并且还将样式应用于错误的元素。请务必将其应用于a标记。例如，将标记赋予它自己的类并将CSS应用于该标记。

a.no-underline {
  text-decoration: none;
}

示例：http://codepen.io/anon/pen/aOaOgO

Answer 4

试试这个..它会给链接2下划线而不是你的项目文本

a:link, a:visited {
text-decoration: underline;
}

.nounderline{
  text-decoration: none !important;
}

.underline{
  text-decoration: underline !important;
}

<div class="list-group">
    
	<a href="#" class="list-group-item">
		<h4 class="list-group-item-heading">Link 1</h4>
		<p class="list-group-item-text">Info about link1. Underline this text.</p>
	</a>
    
	<a href="#" class="list-group-item nounderline">
		<h4 class="list-group-item-heading underline">Link 2</h4>
		<p class="list-group-item-text nounderline" >Info about link2. Don't underline this text.</p>
	</a>
    
</div>

text-decoration：下划线忽略

4 个答案: