CSS issue - Style class doesn't show up in Chrome console-CodePudding

I have a stylesheet in my web application, and I created a class to change link colors and behaviors:

.lnk a, .lnk a:visited {
   color: #fff !important;
   text-decoration: none !important;
}

.lnk a:hover {
   color: cornsilk;
}

And in the page itself, I use this markup:

View our <a href="terms.aspx" >Terms & Conditions of Service</a>

There are a number of other styles in that same stylesheet (such as everything to style the navbar and so on), and they all work. But for some weird reason, when I load the page, not only is the style for the link class not applied, it doesn't even show up when I inspect the elements in the Chrome developer console (although other elements of the page show CSS styles being applied from that same stylesheet). I thought the "!important" declaration would help to override any other style(s) being applied, but it doesn't seem to help. Any help here as to why?

CodePudding user response：

You are using wrong query to select the element
it should be a.lnk which meant element a with class lnk
where as you did .lnk a which means element a which has it's parent element with class lnk

<div >
  <a href="/">click</a> <!-- this is .lnk a-->
</div>

Solution:

a.lnk , a.lnk:visited {
   color: #CCC;
   text-decoration: none;
}

a.lnk:hover {
   color: yellow;
}

View our <a href="terms.aspx" >Terms & Conditions of Service</a>

PS:
Avoid using !important it can introduce behaviour which are unexpected.
In this case you used !important in a.lnk so even if you are changing color on hover it won't be changed as !important in a.lnk will override color in hover .

CodePudding user response：

You are trying to access a tag inside class lnk which is not there. As you have applied the class to a tag, you can directly target lnk. You don't have to use link a. Check the snippet below.

.lnk, .lnk:visited {
   color: red !important;
   text-decoration: none !important;
}

.lnk:hover {
   color: cornsilk;
}

View our <a href="terms.aspx" >Terms & Conditions of Service</a>

CodePudding user response：

Your CSS is wrong; when you use a space it indicated a descendent (child) HTML element. To fix this us the HTML and the class together a.lnk or JUST the class. .lnk - loose the !important - most of the time when you must use that you are doing something wrong.

Here I added some HMTL and CSS just to illustrate better given you color choice.

.my-link-thing {
  border: solid blue 2px;
  background-color: #7777ff;
  padding: 1rem;
  color: #77ff77;
}

a.lnk,
a.lnk:visited {
  color: #fff;
  text-decoration: none;
}

a.lnk:hover {
  color: cornsilk;
}

<div>And in the page itself, I use this markup:
</div>
<div >
  View our <a href="terms.aspx" ><span>Terms & Conditions of Service</span></a>
</div>

CodePudding user response：

In your case chrome is referring to cached css file.

To force chrome to re load css and js:

Windows option 1: CTRL SHIFT R

Windows option 2: SHIFT F5

OS X: ⌘ SHIFT R