Link still underlined - html

Question

there were so many questions about that but none of them are helpful for me. I want normal links blue and underlined while the titles for articles should be red and without underline. This is the code:
a {
color: #337ab7;
text-decoration: underline;
}
.field.field--name-title{
color: #fffff0;
text-decoration: none;
}
I tried combine like: a.field.field--name-title and .field.field--name-title a but it doesn't work.
#EDIT
Adding HTML, this is the DIV with the article:
<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 www.example.com</p>
</div>
<div class="node__links">
<ul class="links inline"><li class="node-readmore">Weiterlesen<span class="visually-hidden"> über LINK TEST</span></li></ul> </div>
</div>
</div>
</article>
</div>

Answer 1

You are targeting the wrong selector. .field.field--name-title is the span inside the anchor tag. Given the markup you provided, try this:
a {
color: #337ab7;
text-decoration: underline;
}
.node__title a {
color: #fffff0;
text-decoration: none;
}
Better still would be to give the anchor tag a class and target that.

Answer 2

If the link (i.e. a tag) does not have the .field.field--name-title classes itself, but is inside those elements, you'd have to write
.field.field--name-title a {
color: #fffff0;
text-decoration: none;
}
That would be the case if the HTML is for example
<li class="field field--name-title">
Title
</li>
If this doesn't apply, you really should post the relevant HTML code, even if you can't edit it, since we have to see the HTML structure in order to get the correct CSS selectors...
ADDITION AFTER HTML CODE HAVING BEEN ADDED:
In this case the selector should be
a.field.field--name-title
If that doesn't work, there might already be a rule with higher specifity in the CSS of your site, so you can extend it to
a.field.field--name-title.field--type-string.field--label-hidden { ... }
And if that still isn't enough, you can add some more, like
.node__container .node__main-content .node__header a.field.field--name-title.field--type-string.field--label-hidden { ... }

Answer 3

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 www.example.com</p>
</div>
<div class="node__links">
<ul class="links inline"><li class="node-readmore">Weiterlesen<span class="visually-hidden"> über LINK TEST</span></li></ul> </div>
</div>
</div>