Maison > interface Web > tutoriel HTML > 下面这段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
Libérer: 2016-06-24 12:23:05
original
1459 Les gens l'ont consulté

本帖最后由 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
Copier après la connexion
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
Copier après la connexion
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
Copier après la connexion
Copier après la connexion



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

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

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal