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
1456 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
Copy after login
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
Copy after login
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
Copy after login
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)

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template