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

本帖最后由 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" / alt="下面这段css是用来控制class为headli1里面所有a标签，鼠标on的效果。怎样用css只得到里面class为headli1里面第一个a标签？_html/css_WEB-ITnose" ></a>				 <ul class="ul1">				 <li class="test1"><a   style="max-width:90%" href="#"><img  id="imgSelect1" class="selectedImg" src="/LogService/images/selected.png" / alt="下面这段css是用来控制class为headli1里面所有a标签，鼠标on的效果。怎样用css只得到里面class为headli1里面第一个a标签？_html/css_WEB-ITnose" >   中焯</a>                                 </li>				 <li class="test2" ><a   style="max-width:90%" href="returnPage2"><img  id="imgSelect2" class="selectedImg" src="/LogService/images/selected.png" / alt="下面这段css是用来控制class为headli1里面所有a标签，鼠标on的效果。怎样用css只得到里面class为headli1里面第一个a标签？_html/css_WEB-ITnose" >   大智慧</a>                                 </li>				 </ul>				</li>

Copier après la connexion

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

Copier après la connexion

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

回复讨论(解决方案)

用css实现不能兼容所有浏览器，可以用js来实现

用css实现不能兼容所有浏览器，可以用js来实现
js这么多li ul li，也比较烦啊，我试过了，这种css所有浏览器都兼容。

如果li的class不一样也可以。
试试
.headli1 a.1ttt:on{
...
}

是这种布局吗

<!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="max-width:90%">    	<a href="#" class="1ttt">                调度日志                <img  id="imgSelectHead1" class="linkMsg" src="/LogService/images/link.jpg" / alt="下面这段css是用来控制class为headli1里面所有a标签，鼠标on的效果。怎样用css只得到里面class为headli1里面第一个a标签？_html/css_WEB-ITnose" >        </a>     </span>     <ul class="ul1">                 <li class="test1">                      <a   style="max-width:90%" href="#">                      <img  id="imgSelect1" class="selectedImg" src="/LogService/images/selected.png" / alt="下面这段css是用来控制class为headli1里面所有a标签，鼠标on的效果。怎样用css只得到里面class为headli1里面第一个a标签？_html/css_WEB-ITnose" >   中焯                      </a>                 </li>                 <li class="test2" >                      <a   style="max-width:90%" href="returnPage2">                      <img  id="imgSelect2" class="selectedImg" src="/LogService/images/selected.png" / alt="下面这段css是用来控制class为headli1里面所有a标签，鼠标on的效果。怎样用css只得到里面class为headli1里面第一个a标签？_html/css_WEB-ITnose" >   大智慧                      </a>                 </li>     </ul></li><li class="headli1">	<span   style="max-width:90%">    	<a href="#" class="1ttt">                调度日志                <img  id="imgSelectHead1" class="linkMsg" src="/LogService/images/link.jpg" / alt="下面这段css是用来控制class为headli1里面所有a标签，鼠标on的效果。怎样用css只得到里面class为headli1里面第一个a标签？_html/css_WEB-ITnose" >        </a>     </span>     <ul class="ul1">                 <li class="test1">                      <a   style="max-width:90%" href="#">                      <img  id="imgSelect1" class="selectedImg" src="/LogService/images/selected.png" / alt="下面这段css是用来控制class为headli1里面所有a标签，鼠标on的效果。怎样用css只得到里面class为headli1里面第一个a标签？_html/css_WEB-ITnose" >   中焯                      </a>                 </li>                 <li class="test2" >                      <a   style="max-width:90%" href="returnPage2">                      <img  id="imgSelect2" class="selectedImg" src="/LogService/images/selected.png" / alt="下面这段css是用来控制class为headli1里面所有a标签，鼠标on的效果。怎样用css只得到里面class为headli1里面第一个a标签？_html/css_WEB-ITnose" >   大智慧                      </a>                 </li>     </ul></li></ul><script type="text/javascript">jQuery(function($){		$('.headli1').find('a.1ttt').eq(0).css({'color':'#f00'});	});</script></body></html>

Copier après la connexion

是这种布局吗

<!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="max-width:90%">    	<a href="#" class="1ttt">                调度日志                <img  id="imgSelectHead1" class="linkMsg" src="/LogService/images/link.jpg" / alt="下面这段css是用来控制class为headli1里面所有a标签，鼠标on的效果。怎样用css只得到里面class为headli1里面第一个a标签？_html/css_WEB-ITnose" >        </a>     </span>     <ul class="ul1">                 <li class="test1">                      <a   style="max-width:90%" href="#">                      <img  id="imgSelect1" class="selectedImg" src="/LogService/images/selected.png" / alt="下面这段css是用来控制class为headli1里面所有a标签，鼠标on的效果。怎样用css只得到里面class为headli1里面第一个a标签？_html/css_WEB-ITnose" >   中焯                      </a>                 </li>                 <li class="test2" >                      <a   style="max-width:90%" href="returnPage2">                      <img  id="imgSelect2" class="selectedImg" src="/LogService/images/selected.png" / alt="下面这段css是用来控制class为headli1里面所有a标签，鼠标on的效果。怎样用css只得到里面class为headli1里面第一个a标签？_html/css_WEB-ITnose" >   大智慧                      </a>                 </li>     </ul></li><li class="headli1">	<span   style="max-width:90%">    	<a href="#" class="1ttt">                调度日志                <img  id="imgSelectHead1" class="linkMsg" src="/LogService/images/link.jpg" / alt="下面这段css是用来控制class为headli1里面所有a标签，鼠标on的效果。怎样用css只得到里面class为headli1里面第一个a标签？_html/css_WEB-ITnose" >        </a>     </span>     <ul class="ul1">                 <li class="test1">                      <a   style="max-width:90%" href="#">                      <img  id="imgSelect1" class="selectedImg" src="/LogService/images/selected.png" / alt="下面这段css是用来控制class为headli1里面所有a标签，鼠标on的效果。怎样用css只得到里面class为headli1里面第一个a标签？_html/css_WEB-ITnose" >   中焯                      </a>                 </li>                 <li class="test2" >                      <a   style="max-width:90%" href="returnPage2">                      <img  id="imgSelect2" class="selectedImg" src="/LogService/images/selected.png" / alt="下面这段css是用来控制class为headli1里面所有a标签，鼠标on的效果。怎样用css只得到里面class为headli1里面第一个a标签？_html/css_WEB-ITnose" >   大智慧                      </a>                 </li>     </ul></li></ul><script type="text/javascript">jQuery(function($){		$('.headli1').find('a.1ttt').eq(0).css({'color':'#f00'});	});</script></body></html>

Copier après la connexion

你还是没有明白我的意思这样把你QQ多少我QQ上跟你说吧

是这种布局吗

<!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="max-width:90%">    	<a href="#" class="1ttt">                调度日志                <img  id="imgSelectHead1" class="linkMsg" src="/LogService/images/link.jpg" / alt="下面这段css是用来控制class为headli1里面所有a标签，鼠标on的效果。怎样用css只得到里面class为headli1里面第一个a标签？_html/css_WEB-ITnose" >        </a>     </span>     <ul class="ul1">                 <li class="test1">                      <a   style="max-width:90%" href="#">                      <img  id="imgSelect1" class="selectedImg" src="/LogService/images/selected.png" / alt="下面这段css是用来控制class为headli1里面所有a标签，鼠标on的效果。怎样用css只得到里面class为headli1里面第一个a标签？_html/css_WEB-ITnose" >   中焯                      </a>                 </li>                 <li class="test2" >                      <a   style="max-width:90%" href="returnPage2">                      <img  id="imgSelect2" class="selectedImg" src="/LogService/images/selected.png" / alt="下面这段css是用来控制class为headli1里面所有a标签，鼠标on的效果。怎样用css只得到里面class为headli1里面第一个a标签？_html/css_WEB-ITnose" >   大智慧                      </a>                 </li>     </ul></li><li class="headli1">	<span   style="max-width:90%">    	<a href="#" class="1ttt">                调度日志                <img  id="imgSelectHead1" class="linkMsg" src="/LogService/images/link.jpg" / alt="下面这段css是用来控制class为headli1里面所有a标签，鼠标on的效果。怎样用css只得到里面class为headli1里面第一个a标签？_html/css_WEB-ITnose" >        </a>     </span>     <ul class="ul1">                 <li class="test1">                      <a   style="max-width:90%" href="#">                      <img  id="imgSelect1" class="selectedImg" src="/LogService/images/selected.png" / alt="下面这段css是用来控制class为headli1里面所有a标签，鼠标on的效果。怎样用css只得到里面class为headli1里面第一个a标签？_html/css_WEB-ITnose" >   中焯                      </a>                 </li>                 <li class="test2" >                      <a   style="max-width:90%" href="returnPage2">                      <img  id="imgSelect2" class="selectedImg" src="/LogService/images/selected.png" / alt="下面这段css是用来控制class为headli1里面所有a标签，鼠标on的效果。怎样用css只得到里面class为headli1里面第一个a标签？_html/css_WEB-ITnose" >   大智慧                      </a>                 </li>     </ul></li></ul><script type="text/javascript">jQuery(function($){		$('.headli1').find('a.1ttt').eq(0).css({'color':'#f00'});	});</script></body></html>

Copier après la connexion

你还是没有明白我的意思这样把你QQ多少我QQ上跟你说吧
1518221897

CSS3可以实现 #nav li:nth-child(1)