为什么文本装饰在我的代码中不起作用？答案

【问题标题】：Why does text-decoration not work in my code?为什么文本装饰在我的代码中不起作用？
【发布时间】：2019-04-14 11:39:20
【问题描述】：

我的代码中的“列表项 2”在我将鼠标悬停在它上面之前，下拉超链接中没有下划线的超链接。这是我期望并希望它做的。

问题是，当我尝试向下拉链接添加多个超链接时，如“列表项 1”所示，超链接在我将鼠标悬停在它们上方之前都带有下划线。

我不得不将“列表项 1”的链接 1 和 2 放在 a 中，因为没有它，链接 1 和 2 会相互重叠。如果我在重叠时在它们之间添加<br>，这也会通过将其向下推来影响“列表项 2”。

需要明确的是，我希望“列表项 1”和“列表项 2”在同一级别上，并且在将鼠标悬停在它们上方之前，所有链接都不会加下划线。

我在网上搜索过，似乎“文本装饰：无”的问题很常见，但我找不到任何解决我的特定问题的方法。

在我的示例中，我将 href 属性留空，因为它们链接的内容在这里并不重要。

ul {
  list-style-type: none;
}

a:hover {
  text-decoration: underline;
}

.dropdown {
  display: inline-block;
  width: 100px;
  height: 25px;
  background-color: black;
  color: white;
  padding: 20px;
  text-align: center;
  font-size: 20px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  padding: 12px 16px;
  text-decoration: none;
}

.dropdown:hover .dropdown-content {
  display: block;
}

<ul>
  <div class="dropdown">
    <li>list item 1</li>
    <div class="dropdown-content">
      <a href="" target="_blank">link 1</a><br>
      <a href="" target="_blank">link 2</a>
    </div>
  </div>

  <div class="dropdown">
    <li>list item 2</li>
    <a class="dropdown-content" href="" target="_blank">link 1</a>
  </div>

【问题讨论】：

如果您的 HTML 中没有可怕的错误，这可能会有所帮助：validator.w3.org

标签： html css text-decorations

【解决方案1】：

调整这些css，你需要为.dropdown-content a添加css并将a:hover移动到结束

.dropdown-content a{
  text-decoration: none ;
  }

  a:hover {
  text-decoration: underline ;
}

<!DOCTYPE html>

<html>
<head>
<style>
  ul {
  list-style-type:none;
}



.dropdown {
  display: inline-block;
  width:100px;
  height:25px;
  background-color: black;
  color: white;
  padding: 20px;
  text-align: center;
  font-size: 20px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  padding: 12px 16px;
  text-decoration: none ;
 }
 
 .dropdown-content a{
  text-decoration: none ;
  }
  
  a:hover {
  text-decoration: underline ;
}
 

.dropdown:hover .dropdown-content {display: block;}
</style>
</head>
<body>


<ul>
<div class="dropdown">
  <li>list item 1</li>
    <div class="dropdown-content">
    <a href="" target="_blank">link 1</a><br>
    <a href="" target="_blank">link 2</a>
    </div>
</div>

<div class="dropdown">
  <li>list item 2</li>
  <a class="dropdown-content" href="" target="_blank">link 1</a>
</div>

 </body>
</html>

【讨论】：

此外，还可以利用 :not 伪选择器（取决于所需的浏览器支持）。如果你写a:not(:hover)，规则的顺序无关紧要，如果你只看第一个会更清楚。
您好，感谢您的帮助。我不知道 css 代码的顺序很重要（对此是新的），所以我会尽量记住这一点以备不时之需。我不完全明白为什么我需要'.dropdown-content a'。由于
标签更改了两个标签的背景颜色和填充，为什么它不将文本装饰更改为无？

【解决方案2】：

您需要定位 a 元素，这样您就可以在这两种情况下使用额外的包装器并调整 CSS，如下所示：

我还更正了无效的 HTML，因为您只能将 li 用作 ul 的子级

ul {
  list-style-type: none;
}

.dropdown {
  display: inline-block;
  width: 100px;
  height: 25px;
  background-color: black;
  color: white;
  padding: 20px;
  text-align: center;
  font-size: 20px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  padding: 12px 16px;
}

.dropdown-content a {
  text-decoration: none;
}

.dropdown-content a:hover {
  text-decoration: underline;
}

.dropdown:hover .dropdown-content {
  display: block;
}

<ul>
  <li class="dropdown">list item 1
    <div class="dropdown-content">
      <a href="" target="_blank">link 1</a><br>
      <a href="" target="_blank">link 2</a>
    </div>
  </li>

  <li class="dropdown">list item 2
    <div class="dropdown-content">
      <a href="" target="_blank">link 1</a>
    </div>
  </li>
</ul>

【讨论】：

由于 'dropdown-content' 改变了 a 元素的背景颜色和填充，为什么在 'dropdown-content' 中使用文本装饰不会同时改变元素的文本装饰？为什么我需要创建“下拉内容 a”？
@Steve 因为浏览器（用户代理）将默认样式应用于a 元素。所以在下拉内容上应用文本装饰是不够的。您需要通过定位 a 元素来覆盖默认样式