The following css is used to control the effect of all a tags in headli1 with class and mouse on. How to use css to get only the first a tag in headli1 with class? _html/css

The following css is used to control the effect of all a tags in headli1 with class and mouse on. How to use css to get only the first a tag in headli1 with class? _html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:23:05

Original

1448 people have browsed it

This post was last edited by Henry_YQH on 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" />   中焯</a>                                 </li>				 <li class="test2" ><a style="color:#6C7FA4" href="returnPage2"><img id="imgSelect2" class="selectedImg" src="/LogService/images/selected.png" />   大智慧</a>                                 </li>				 </ul>				</li>

Copy after login

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

Copy after login

Now the above In css, when all a tags are on, the css of the li where they are located will have this effect. How can only the li of the first a tag and the row where it is located get the above css?

Reply to discussion (solution)

Implementation using css is not compatible with all browsers, but can be implemented using js

Implementation using css is not compatible with all browsers. You can use js to implement it.
There are so many li ul li in js, which is also annoying. I have tried it. This kind of css is compatible with all browsers.

It’s okay if the classes of li are different.
Try
.headli1 a.1ttt:on{
...
}

Is this the layout?

<!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" />   中焯                      </a>                 </li>                 <li class="test2" >                      <a style="color:#6C7FA4" href="returnPage2">                      <img id="imgSelect2" class="selectedImg" src="/LogService/images/selected.png" />   大智慧                      </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" />   中焯                      </a>                 </li>                 <li class="test2" >                      <a style="color:#6C7FA4" href="returnPage2">                      <img id="imgSelect2" class="selectedImg" src="/LogService/images/selected.png" />   大智慧                      </a>                 </li>     </ul></li></ul><script type="text/javascript">jQuery(function($){		$('.headli1').find('a.1ttt').eq(0).css({'color':'#f00'});	});</script></body></html>

Copy after login

Yes Is this the layout?

<!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" />   中焯                      </a>                 </li>                 <li class="test2" >                      <a style="color:#6C7FA4" href="returnPage2">                      <img id="imgSelect2" class="selectedImg" src="/LogService/images/selected.png" />   大智慧                      </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" />   中焯                      </a>                 </li>                 <li class="test2" >                      <a style="color:#6C7FA4" href="returnPage2">                      <img id="imgSelect2" class="selectedImg" src="/LogService/images/selected.png" />   大智慧                      </a>                 </li>     </ul></li></ul><script type="text/javascript">jQuery(function($){		$('.headli1').find('a.1ttt').eq(0).css({'color':'#f00'});	});</script></body></html>

Copy after login

You still don’t understand what I mean. How many QQ do you have? I’ll tell you on QQ

Is it this kind of layout?

<!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" />   中焯                      </a>                 </li>                 <li class="test2" >                      <a style="color:#6C7FA4" href="returnPage2">                      <img id="imgSelect2" class="selectedImg" src="/LogService/images/selected.png" />   大智慧                      </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" />   中焯                      </a>                 </li>                 <li class="test2" >                      <a style="color:#6C7FA4" href="returnPage2">                      <img id="imgSelect2" class="selectedImg" src="/LogService/images/selected.png" />   大智慧                      </a>                 </li>     </ul></li></ul><script type="text/javascript">jQuery(function($){		$('.headli1').find('a.1ttt').eq(0).css({'color':'#f00'});	});</script></body></html>

Copy after login

You still don’t understand what I mean. How many QQ do you have? I’ll tell you on QQ
1518221897

CSS3 Can be achieved #nav li:nth-child(1)