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

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

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

Answer 1

如果设置了以下内容：

a:link {color: blue;}

所有<a>标签都将采用蓝色，无论其位置如何。此外，<a>标记不会继承color属性！所以你必须为所有<a>设置它。

所以这样：

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

CSS：增加父元素的特异性

2 个答案: