下头这段css是用来控制class为headli1里面所有a标签，鼠标on的效果。怎样用css只得到里面class为headli1里面第一个a标签

2013-08-10

下面这段css是用来控制class为headli1里面所有a标签，鼠标on的效果。怎样用css只得到里面class为headli1里面

下面这段css是用来控制class为headli1里面所有a标签，鼠标on的效果。怎样用css只得到里面class为headli1里面第一个a标签？
本帖最后由 Henry_YQH 于 2013-07-28 22:58:08 编辑

<li class="headli1"><a href="#" class="1ttt">
调度日志<img id="imgSelectHead1" class="linkMsg" src="/LogService/images/link.jpg" /></a>
 <ul class="ul1">
 <li class="test1">
<a style="color:#6C7FA4" href="#"><img id="imgSelect1" class="selectedImg" src="/LogService/images/selected.png" />&nbsp;&nbsp;&nbsp;中焯</a>
                                 </li>
 <li class="test2" >
<a style="color:#6C7FA4" href="returnPage2"><img id="imgSelect2" class="selectedImg" src="/LogService/images/selected.png" />&nbsp;&nbsp;&nbsp;大智慧</a>
                                 </li>
 </ul>
</li>

#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？

[解决办法]
是这种布局吗


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<title>无标题文档</title>
</head> 
 

<body>
<ul id="nav">
<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" />&nbsp;&nbsp;&nbsp;中焯
                      </a>
                 </li>
                 <li class="test2" >
                      <a style="color:#6C7FA4" href="returnPage2">
                      <img id="imgSelect2" class="selectedImg" src="/LogService/images/selected.png" />&nbsp;&nbsp;&nbsp;大智慧
                      </a>
                 </li>
     </ul>
</li>
<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" />&nbsp;&nbsp;&nbsp;中焯
                      </a>
                 </li>
                 <li class="test2" >
                      <a style="color:#6C7FA4" href="returnPage2">
                      <img id="imgSelect2" class="selectedImg" src="/LogService/images/selected.png" />&nbsp;&nbsp;&nbsp;大智慧
                      </a>
                 </li>
     </ul>
</li>
</ul>
<script type="text/javascript">
jQuery(function($){

$('.headli1').find('a.1ttt').eq(0).css({'color':'#f00'});
});
</script>
</body>
</html>

[解决办法]
CSS3可以实现 #nav li:nth-child(1)

热点排行