为什么这个 CSS 没有禁用超链接中的文本装饰？答案

【问题标题】：Why is this CSS not disabling the text-decoration in the hyperlink?为什么这个 CSS 没有禁用超链接中的文本装饰？
【发布时间】：2015-05-15 23:07:27
【问题描述】：

我正在使用 codepen 中的 CSS 来创建一个很酷的悬停超链接下划线效果。但是当我去实现它时，即使我将 a 标记的文本装饰设置为 none，我仍然可以看到应用到超链接的文本装饰。有什么问题？

编辑：我希望将酷炫的超链接效果应用于 View Battle Worlds Only 链接。

CSS

section.custom_view h2, section.custom_view h3, section.custom_view h4 {
  color: #666;
  font-size: 150%;
  padding-top: 1.25em;
  margin-right: 0.625em; }

section.custom_view ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden; }

section.custom_view li {
  float: left;
  margin-bottom: 0.625em; }

section.custom_view li a {
  display: inline-block;
  font-size: 150%;
  padding-top: 1.25em;
  text-decoration: none; }

section.custom_view li a, section.custom_view li a:visited, section.custom_view li a:hover, section.custom_view li a:active {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: relative;
  transition: 0.5s color ease;
  text-decoration: none; }

section.custom_view li a:hover {
  color: #990000; }

section.custom_view li a.before:before, section.custom_view li a.after:after {
  content: "";
  transition: 0.5s all ease;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute; }

section.custom_view li a.after:after {
  bottom: -0.25em; }

section.custom_view li a.before:before, section.custom_view li a.after:after {
  height: 5px;
  height: 0.35rem;
  width: 0;
  background: #990000; }

section.custom_view li a.third:after, section.custom_view li a.sixth:before, section.custom_view li a.sixth:after {
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%); }

section.custom_view li a.before:hover:before, section.custom_view li a.after:hover:after {
  width: 100%; }

HTML

<body>
   <! -- some more HTML -->
<section class='content'>
    <ul class='breadcrumbs'>
      <li><a href="/">Home</a></li>
      <li>Searching for Worlds</li>
    </ul>
    <section class='custom_view'>
      <ul>
        <li>
          <h2>Viewing All Trials</h2>
        </li>
        <li>
          <a class="third after" href="/search?limit=15&amp;locale=en&amp;offset=0&amp;recruiting_status=Recruiting&amp;search_header_menu_left=Viewing+All+Battle+Worlds&amp;search_header_menu_right=View+All+Worlds&amp;search_terms=Mars&amp;zip_code=90033">View Battle Worlds Only</a>
        </li>
      </ul>
    </section>
   <! -- some more HTML -->
</section>
</body>

【问题讨论】：

感谢小提琴作品，奇怪的是，当动画在我的实际应用程序中开始时，仍然有一个文本装饰出现在悬停上......但不确定它可能是什么 - 有什么想法吗？跨度>
代码检查器说“text-decoration: none”在 Firefox/Chrome 的计算属性中获胜，我不想做星号，因为我不想将样式应用于所有 a 元素。
其实我看到了a { color: blue; } 包含一个被划掉的 text-decoration: none。

标签： html css

【解决方案1】：

您的 CSS 被应用到类为 custom_view 的 section 元素，因为它在所有 CSS 选择器中都以这种方式声明：

section.custom_view

但是，您在 HTML 中的 section 有一个 content 类：

<section class='content'>

要完成这项工作，您需要匹配类。

对于custom_view的所有实例，要么将CSS中的类更改为content

或

将 HTML 中 section 的类更改为 class='custom_view'

【讨论】：

啊，我明白了，当我看到这个时，你在内部 section 上有一个 trial_view 类。如果这仍然是一个问题，则必须是其他地方的一些 CSS 覆盖 text-decoration:none。开发者工具应该会告诉你 CSS 是从哪里来的。
无论它来自哪里，您的 CSS 选择器都需要更具体，根据 specificity rules。如果您能确定胜出的 CSS 选择器，我们可以帮助您找到击败它的方法。