在 li 标签内设置 <a> 的字体颜色

【问题标题】：setting font color of <a> inside a li tag在 li 标签内设置 <a> 的字体颜色
【发布时间】：2019-05-25 00:25:36
【问题描述】：

我的标记看起来像：

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

我希望文本 blah 是红色的。

c1是用在其他地方的，所以我想在不影响其他标记的情况下尽量往下钻。

【问题讨论】：

标签： css

【解决方案1】：

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

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

PS：不建议在 <div>-tag 中使用 <li> 标签而不使用 <ul>-tag。

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案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 并且

元素的父元素是

而不是

或

，则您的标记有问题。

【讨论】：

CSS 选择器是从右到左评估的，所以“浏览器工作量少”部分是错误的。
与 >在 CSS 选择器中的元素之间（即元素的直接父子关系），浏览器只需要检查最多三层嵌套元素，每个 <a>元素。如果您只指定“任何祖先”（即 CSS 选择器中的元素之间只有一个空格），则浏览器需要将所有祖先检查回根 ;永远<a>元素。最多检查三个级别比检查所有级别要少。

【解决方案5】：

使用以下规则：

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

这匹配li标签内的a标签与c2类div标签内的类c1。

为了增加唯一性，您可能希望为 a 标记提供自己的类名。

另外，li 标签应该只出现在列表标签内。（ul 或 ol）。
你是说<li class="c1">吗？

【讨论】：

【解决方案6】：

.c1 .c2 a {
  color: red;
}

【讨论】：

【解决方案7】：

.c2 a
{
     color: red;
}

【讨论】：

【解决方案8】：

下面的代码就可以了（非常具体）。

.c1 .c2 a { color: red; }

【讨论】：

【解决方案9】：

首先选择要更改的div，即.c2，里面是一个链接，应该像这样选择

.c2 a { color:red }

【讨论】：