开发者

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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜