更改 a:hover on li:first child答案

【问题标题】：Changing a:hover on li:first child更改 a:hover on li:first child
【发布时间】：2014-06-11 19:34:42
【问题描述】：

我正在尝试使无序列表中的第一个链接具有特殊的悬停属性

喜欢

li:first-child a:hover{code here}

但它不起作用。我也试过了

li a:hover:first-child{code here}

但它只是改变了所有 lis 的 a:hover。

我根本无法更改列表。它是从另一个站点 (boards2go.com) 自动化的，我也在应用 CSS，并且列表没有特殊的类名，所以我正在尝试解决它。

理想情况下，我希望我的列表如下所示：

-第一项【有特殊修改】

-项目二[使用常规的 a:hover css]

-第三项[使用常规的 a:hover css]

实际的 css 比简单的粗体和斜体要复杂一些，但你明白我的意思。

【问题讨论】：

我们需要查看您的 HTML 结构 :)
我不明白你的 HTML 结构是什么意思？ HTML 本身不是我自己的，是其他网站的。
boards2go.com/boards/board.cgi?user=mmzjoinme -- 这就是我想要改变的。我试图让每个线程的第一篇文章都有一个特殊的悬停属性，其余的遵循正常的 css
然后发送链接 - 此代码有效。一些 CSS 冲突有问题，可能....
查看您的链接页面，first-child 对您不起作用（尤其是因为您无法更改 HTML），因为li 不是第一个孩子。看我的回答。

标签： html css hover css-selectors

【解决方案1】：

查看您提供的链接：http://www.boards2go.com/boards/board.cgi?user=mmzjoinme

li:first-child a:hover{code here} 不起作用，因为li 不是其父元素的第一个子元素。其父元素 (ul) 的第一个子元素恰好是 <br> (which is not good HTML, li elements should be the only children of ul besides script-supporting elements)。您可以在此处详细了解 first-child 选择器的工作原理：https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child

要解决此问题，您可以将first-of-type 选择器与一些更具体的定位结合使用。

浏览器支持first-of-type:http://caniuse.com/#feat=css-sel3

CSS：

.b2g_posts_container > ul > li:first-of-type a:hover
{
    background-color: orange;
}

JSFiddle：http://jsfiddle.net/SombreErmine/4MMWP/

- 或 -

CSS：

ul > li:first-of-type a:hover
{
    background-color: orange;
}

li > ul > li:first-of-type a:hover
{
    background-color: transparent;
}

JSFiddle：http://jsfiddle.net/SombreErmine/4MMWP/1/

【讨论】：

【解决方案2】：

试试这个，效果很好。显然没有看到你的代码，很难知道你的确切意思

http://jsfiddle.net/36dQz/

<html>
<head>
<style type="text/css">
ul.firstlinkhover li:first-child a:hover
{
    font-weight: bold;
    font-style: normal!important;
}
ul.firstlinkhover a:hover
{
    font-style: italic;
}
</style>
</head>

<body>
<ul class="firstlinkhover">
<li><a href="#">One</a></li>
<li><a href="#">One</a></li>
</ul>
</body>
</html>

【讨论】：

【解决方案3】：

这是一个有效的小提琴http://jsfiddle.net/826xZ/ 使用

li:first-child a:hover { border: 1px solid #000; }

【讨论】：

这很奇怪。当我尝试这样做时，它没有用。我又试了一次。现在它倒退了。第一个孩子是紫色的，其余的都是红色的，应该是先红后紫。