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

WBOY
Freigeben: 2016-06-24 12:23:05
Original
1448 Leute haben es durchsucht

本帖最后由 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>
Nach dem Login kopieren



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


现在上面的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>
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren

是这种布局吗

<!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>
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren



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



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

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

Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage