Heim  >  Artikel  >  Web-Frontend  >  下面这段css是用来控制class为headli1里面所有a标签,鼠标on的效果。怎样用css只得到里面class为headli1里面第一个a标签?_html/css_WEB-ITnose

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

WBOY
WBOYOriginal
2016-06-24 12:23:051405Durchsuche

本帖最后由 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>



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



回复讨论(解决方案)

用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>

是这种布局吗

<!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>



你还是没有明白我的意思  这样把  你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>



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

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

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn