Question

有很多问题，但没有一个对我有帮助。我想要正常的链接蓝色和下划线，而文章的标题应该是红色的，没有下划线。这是代码：

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这样的组合，但它不起作用。

@EDIT 添加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>

Answer 1

您的目标是错误的选择器。 .field.field--name-title是锚标记内的跨度。鉴于您提供的标记，请尝试以下操作：

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

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

更好的做法是给锚标签一个类并定位它。

Answer 2

如果链接（即a标记）本身没有.field.field--name-title类，但是在这些元素中，则必须编写

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

如果HTML是例如

那就是这种情况

<li class="field field--name-title">
  <a href="something.html">Title</a>
</li>

如果这不适用，你真的应该发布相关的HTML代码，即使你不能编辑它，因为我们必须看到HTML结构才能获得正确的CSS选择器。

添加HTML代码后添加：

在这种情况下，选择器应该是

a.field.field--name-title

如果这不起作用，可能已经有一个规则具有更高的网站CSS规则，因此您可以将其扩展到

a.field.field--name-title.field--type-string.field--label-hidden  { ... }

如果仍然不够，你可以添加更多，比如

.node__container .node__main-content .node__header a.field.field--name-title.field--type-string.field--label-hidden { ... }

Answer 3

＆＃13;

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

＆＃13;

<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>

＆＃13;

链接仍有下划线

3 个答案: