链接仍带下划线

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

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>

来源

2017-08-09 soommy12

添加HTML代码，就像你想不工作的一个例子。 – lilezek

我不能编辑'HTML'因为我在编辑现有的模式 – soommy12

你可以尝试**！在文本修饰中重要** –

您指定了错误的选择。 .field.field--name-title是锚标记内的跨度。鉴于你提供的标记，试试这个：

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

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

更好的是给锚标签一个类和目标。

来源

2017-08-09 11:27:52 jberglund

似乎我需要通过网络浏览器获得更多练习。谢谢，它完美的工作！ – soommy12

太棒了！乐于帮助。 – jberglund

如果链接（即a标签）不具有.field.field--name-title类本身，而是这些元素里面，你“d具有写

.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 { ... }

来源

2017-08-09 11:00:01 Johannes

如果我这样做（我已经试过了）标题的颜色也在变化 – soommy12

我加了'HTML'文章是 – soommy12

请注意除了我的回答 – Johannes

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

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

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

来源

2017-08-09 12:31:29

链接仍带下划线

回答

相关问题