更改li：第一个孩子的悬停
[英]Changing a:hover on li:first child
问题描述
I'm trying to make the first link in an unordered list have a special hover attribute 
我正在尝试使无序列表中的第一个链接具有特殊的悬停属性
like 喜欢
li:first-child a:hover{code here} li：第一个孩子a：悬停{此处代码}
but it's not working. 但它不起作用。 I also tried 我也试过
li a:hover:first-child{code here} li a：hover：first-child {code here}
but it just changed the a:hover for all the lis. 但它只是更改了所有lis的a：hover。
I can't change the list at all. 我根本无法更改列表。 It's automated from another site (boards2go.com) that I'm applying CSS too and there's no special class names for the lists, so I'm trying to work around it. 它也是从另一个站点（boards2go.com）自动执行的，我也正在应用CSS，并且列表没有特殊的类名，因此我尝试解决该问题。
Ideally, I'd like my list to go like this: 理想情况下，我希望清单如下：
-item one [has special modification] -一项[经过特殊修改]
-item two [uses the regular a:hover css] -项目2 [使用常规a：hover css]
-item three [uses the regular a:hover css] -项目3 [使用常规a：hover css]
The actual css is a little more involved than a simple bold vs. italic but you get my meaning. 实际的CSS比简单的粗体和斜体要复杂得多，但是您能理解我的意思。
3 个解决方案
解决方案1
2 2014-04-25 22:29:43
这是一个工作的小提琴http://jsfiddle.net/826xZ/使用
li:first-child a:hover { border: 1px solid #000; }
解决方案2
1 已采纳 2014-04-25 22:39:26
Looking at the link you provided: http://www.boards2go.com/boards/board.cgi?user=mmzjoinme 查看您提供的链接： http : //www.boards2go.com/boards/board.cgi ?user= mmzjoinme
li:first-child a:hover{code here} doesn't work because the li is not the first child of its parent element. li:first-child a:hover{code here}不起作用，因为li并不是其父元素的第一个孩子。 The first child of its parent element (the ul ) happens to be <br> ( which is not good HTML, li elements should be the only children of ul besides script-supporting elements ). 它的父元素（ ul ）的第一个子元素恰好是<br> （ 不是很好的HTML，除了脚本支持元素之外， li元素应该是ul的唯一子元素 ）。 You can learn more about how the first-child selector works here: https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child 您可以在此处了解有关第first-child选择器如何工作的更多信息： https : //developer.mozilla.org/en-US/docs/Web/CSS/ : first-child
To fix this, you can use the first-of-type selector in conjunction with some more specific targeting. 要解决此问题，您可以将“ first-of-type选择器”与某些更具体的定位结合使用。
Browser Support for first-of-type : http://caniuse.com/#feat=css-sel3 first-of-type浏览器支持： http : //caniuse.com/#feat=css-sel3
CSS: CSS：
.b2g_posts_container > ul > li:first-of-type a:hover
{
background-color: orange;
}
JSFiddle: http://jsfiddle.net/SombreErmine/4MMWP/ JSFiddle： http : //jsfiddle.net/SombreErmine/4MMWP/
- or - - 要么 -
CSS: 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/ JSFiddle： http : //jsfiddle.net/SombreErmine/4MMWP/1/
解决方案3
0 2014-04-25 22:33:36
Try this, working fine. 试试这个，工作正常。 Obviously without seeing your code, it's hard to know what you mean exactly 显然，在没有看到您的代码的情况下，很难确切知道您的意思是什么
http://jsfiddle.net/36dQz/ 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.