Home > Article > Web Front-end > 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
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
- WBOYOriginal
- 2016-06-24 12:23:051455browse
<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>
#nav li a.on{ background:#F3F7FD; width: 114px; margin-left: 1px; background-image: url(/LogService/images/nav1.png);} 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> 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> 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> 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)
Statement：
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