setting font color of <a> inside a li tag
My markup looks like:
<div class="c1">
<li class="c2"><a href="">blah</a><开发者_如何学运维/li>
</div>
I want the text blah to be red.
c1 is used other places, so I want to drill down as much as possible without affecting other markup.
Use this style definition in your css-file:
div.c1 li.c2 a {
color: red;
}
PS: Having your <li>
tag inside your <div>
-tag without an <ul>
-tag is not recommended.
<style>
div.c1 li.c2 a { color: red; }
</style>
<div class="c1">
<li class="c2"><a href="">blah</a></li>
</div>
<style>
div.c1 li.c2 a { color: red; }
</style>
The most specific CSS selectors would probably be
div.c1 > li.c2 > a:link,
div.c1 > li.c2 > a:active,
div.c1 > li.c2 > a:hover,
div.c1 > li.c2 > a:visited {
color: red;
}
The more specific the CSS selectors, the less work for the browser's rendering engine.
However, something is wrong with your markup if this is supposed to be HTML and the <li> element's parent is a <div> instead of <ol> or <ul>.
Use the following rule:
div.c1 li.c2 a {
color: red;
}
This matches a
tags inside of li
tags with class c2
inside of div
tags with class c1
.
For added uniqueness, you might want to give the a
tag its own class name.
Also, li
tags should only appear inside of list tags. (ul
or ol
).
Did you mean <li class="c1">
?
.c1 .c2 a {
color: red;
}
.c2 a
{
color: red;
}
The following code will do (very specific).
.c1 .c2 a { color: red; }
First choose the div you want to change which is .c2 inside this is a link which should be selected like
.c2 a { color:red }
精彩评论