设置<a> inside a li tag</a>的字体颜色

Question

我的标记看起来像：

<div class="c1">
      <li class="c2"><a href="">blah</a></li>
</div>

我希望文字为红色。

c1用于其他地方，所以我想尽可能地向下钻取而不影响其他标记。

Answer 1

在css文件中使用此样式定义：

div.c1 li.c2 a {
  color: red;
}

PS：不建议在<li>标记内添加<div>标记而不使用<ul>标记。

Answer 2

<style>
  div.c1 li.c2 a { color: red; }
</style>

Answer 3

<div class="c1">
      <li class="c2"><a href="">blah</a></li>
</div>
<style>
  div.c1 li.c2 a { color: red; }
</style>

Answer 4

最具体的CSS选择器可能是

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

CSS选择器越具体，浏览器渲染引擎的工作就越少。

但是，如果这个标记应该是HTML并且＆lt; li＆gt;，则标记出现问题。 element的父级是＆lt; div＆gt;而不是＆lt; ol＆gt;或者＆lt; ul＆gt;。

Answer 5

使用以下规则：

div.c1 li.c2 a {
    color: red;
}

这会将a标记内的li标记与c2标记内的div标记c1内的a标记进行匹配。

为了增加唯一性，您可能希望为li标记指定自己的类名。

此外，ul标记只应出现在列表标记内。 （ol或<li class="c1">） 您的意思是{{1}}吗？

Answer 6

.c1 .c2 a {
  color: red;
}

Answer 7

.c2 a
{
     color: red;
}

Answer 8

以下代码（非常具体）。

.c1 .c2 a { color: red; }

Answer 9

首先选择要更改的div，其中.c2是一个应该选择的链接，如

.c2 a { color:red }