Question

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

像

li：第一个孩子a：悬停{code here}

但它不起作用。我也试过

li a：悬停：第一个孩子{code here}

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

我根本无法更改列表。它是从另一个网站（boards2go.com）自动化的，我也在使用CSS，并且列表中没有特殊的类名，因此我正在尝试解决它。

理想情况下，我希望我的列表像这样：

-item one [有特殊修改]

-item two [使用常规a：hover css]

-item three [使用常规a：hover css]

实际的css比简单的粗体与斜体有点相关，但你明白我的意思。

Answer 1

这是一个使用

的工作小提琴http://jsfiddle.net/826xZ/

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

Answer 2

查看您提供的链接：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/

Answer 3

试试这个，工作正常。显然，如果没有看到您的代码，很难知道您的意思是什么

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>

改变a：悬停在li：第一个孩子

3 个答案: