Originally Posted by
Mr.81
I'm back again -_- ha, it seems there's a "strikethrough" on the element stopping the link colour coming through...if I inspect a linked element, the "color" has a strikethrough through it...if I tick the box next to it, it shows the colors. What's restricting the colors being shown?
Hi there,
This happens when a more specific CSS style overrides a more generic one.
For example If you have this:
HTML Code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Specificity example</title>
<style>
a{color: green;}
a.warning{color:yellow}
</style>
</head>
<body>
<a href ="">A Link</a>
<a class="warning" href="">A second Link</a>
</body>
</html>
This will output two <a> tags on a page.
The first will be green, but the second will be yellow (the reason being that we defined a warning class and applied it to our second link).
If you inspect the second link with a property inspector, then you will see:
a.warning {
color: yellow;
}
a {
color: green;
}
This is because for link two, the browser picks up on the first style.
Then the first style is immediately overridden by the second style.
Does that help?
Reply With Quote
Bookmarks