Question

web中，怎样用css只得到里面class为headli1里面第一个a标签,使其所在的li得到on的效果？

下面这段css是用来控制class为headli1里面所有a标签，鼠标on的效果。怎样用css只得到里面class为headli1里面第一个a标签？
<li class="headli1"><span style="color: #FF0000;"><a href="#" class="1ttt">
调度日志<img id="imgSelectHead1" class="linkMsg" src="/LogService/images/link.jpg" /></a></span>
<ul class="ul1">
<li class="test1">
<a style="color:#6C7FA4" href="#"><img id="imgSelect1" class="selectedImg" src="/LogService/images/selected.png" /> 中焯</a>
</li>
<li class="test2" >
<a style="color:#6C7FA4" href="returnPage2"><img id="imgSelect2" class="selectedImg" src="/LogService/images/selected.png" /> 大智慧</a>
</li>
</ul>
</li>
css:

#nav li a.on{
background:#F3F7FD;
width: 114px;
margin-left: 1px;
background-image: url(/LogService/images/nav1.png);
}

现在上面的css是所有a标签on的时候，它所在的li的css都有这个效果，怎样只让第一个a标签，所在的一行的li得到上面的css？

Answer 1

#nav .headli1 a.on{ 
 background:#F3F7FD;
 width: 114px;
 margin-left: 1px;
 background-image: url(/LogService/images/nav1.png);
}

这样控制就可以了

因为你给li写了样式 

所以你在写css的时候如果只让.headli1下面的a下的on写样式就可以了

追问

哥们 不知道你看了没有 .headli1 下面有3个a 其中有2个在headli1 的ul的li下面 一共3个被赋予了属性 我只想让第一个得到这样的效果

追答

#nav li .1ttt.on{
background:#F3F7FD;
width: 114px;
margin-left: 1px;
background-image: url(/LogService/images/nav1.png);
}
第一个a不是有css样式嘛 直接定义那个a的样式就行呀

追问

这样我试过了 on前面不能是a标签的class，只能是a，不知道什么情况？哥们 你Q Q是什么 如果说不清可以加你Q Q

追答

一三六三 八零二 二零八

追问

算了 不问了 蛋疼

追答

呃...汗...

Answer 2

ul > li:first-child 用伪类嘛，ul的子li元素中的第一个子元素！！直接.test1应该可以的吧

追问

你没看到第一个li下面还有ul和li吗？
你这样 第一个li下面ul的li也有这个属性了。

追答

这是个事例，你不知道把ul改成headli的父元素？？？给你说了是第一子元素