CSS：增加父元素的特异性

Question

我有以下基本的 HTML 结构：

<ul class = "foo">
   <li>
      <a href = "example.com">
       Click here
      </a>
   </li>
</ul>

还有以下 CSS：

a:link {
   color: blue;
}

ul.foo li {
   padding: 2em;
   border: 1px solid black;
}

ul.foo li:hover {
   color: green;
}

ul.foo li:hover a {
   color: green;
}

所以基本上所有链接都是蓝色的，<UL> 内的 <LI> 元素 "foo" 类的元素在悬停时有绿色文本。这里的问题是，当鼠标悬停在 <LI> 元素上时，我希望作为 <LI> 元素的子元素的 <A> 元素具有 green 文本。但是，由于文档范围的a:link 选择器，<a> 元素中的链接文本保持蓝色直到鼠标专门触摸链接。但我希望鼠标悬停在封闭的<LI> 元素上时链接变为绿色。

我怎样才能做到这一点？我知道 CSS 使用“特异性”来决定应用哪些规则，但我不明白为什么 ul.foo li:hover 选择器比文档范围的 a 选择器更少具体。

Answer 1

当您设置了以下内容时：

a:link {color: blue;}

所有<a> 标签都将显示为蓝色，与位置无关。此外，<a> 标签不继承color 属性！所以你必须为所有<a>s 设置它。

那么就这样吧：

ul.foo li:hover a {color: green;} /* Or at least */
ul.foo li:hover a {color: inherit;}

根据您的评论：

抱歉，我不清楚：我确实有 ul.foo li:hover a { color: green; } - 但这并不能解决我正在谈论的问题 - 基本上，我希望 a 元素中的文本在我悬停时变为绿色在父 <LI> 元素之上。

为此，您需要这样做：

ul.foo li:hover a, ul.foo li:hover a:hover {color: green;}

Answer 2

您正在为悬停时的 li 元素设置样式。但是，如果您希望 <a> 标签中的文本变为绿色，请将您的 CSS 更改为此以实际设置 <a> 标签的样式：

ul.foo li:hover a {
   color: green;
}