html - 链接仍带下划线

标签 html css css-selectors css-specificity

关于那个有很多问题,但没有一个对我有帮助。我希望普通链接为蓝色且带下划线,而文章标题应为红色且无下划线。这是代码:

a {

  color: #337ab7;
    text-decoration: underline;

}

.field.field--name-title{
    color: #fffff0;
    text-decoration: none;
}

我试过像这样组合:a.field.field--name-title.field.field--name-title a 但它不起作用。

@编辑 添加 HTML,这是带有文章的 DIV:

<div class="views-row">


<article role="article" about="/de/link-test" class="node node--type-blog-entry node--promoted node--view-mode-teaser clearfix">
  <div class="node__container">
    <div class="node__main-content clearfix">
      <header class="node__header">

                      <h2 class="node__title">
              <a href="/de/link-test" rel="bookmark"><span class="field field--name-title field--type-string field--label-hidden">LINK TEST</span>
</a>
            </h2>

                        </header>

            <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>tu jest link <a href="www.example.com">www.example.com</a></p>
</div>
        <div class="node__links">
    <ul class="links inline"><li class="node-readmore"><a href="/de/link-test" rel="tag" title="LINK TEST" hreflang="de">Weiterlesen<span class="visually-hidden"> über LINK TEST</span></a></li></ul>  </div>

          </div>
  </div>
</article>

  </div>

最佳答案

您定位到错误的选择器。 .field.field--name-title 是 anchor 标签内的跨度。根据您提供的标记,试试这个:

a {
  color: #337ab7;
  text-decoration: underline;
}

.node__title a {
  color: #fffff0;
  text-decoration: none;
}

更好的方法是给 anchor 标记一个类并定位它。

关于html - 链接仍带下划线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45588653/

相关文章:

javascript - 从 jquery 中的 html 下拉菜单获取值

html - HTML 内联中的 CSS 动画

CSS :before not displaying

css - 如何仅将 css 样式应用于子项

javascript - 如何在找到的 HTML 元素之前插入整个 css 类?

javascript - 选择所有元素,直到到达特定元素

html - 表格内的垂直线嵌套/交错组

javascript - 更改节点列表中的所有元素

css - 如何在 css 和 html 中构建悬停,当悬停在彩色背景上时会出现图像?

html - 添加空格以列出连续的分隔单词