有关伪类选择器的几个小问题
日期：2014-05-16 浏览次数：20363 次
有关伪类选择器的几个问题
<style type= "text.css ">
1.#nav li a,#nav li a:hover span {
line-height: 20px;
text-decoration: none;
background: #DDDDDD;
color: #666666;
display: block;
width: 80px;
text-align: center;
overflow:hidden;
}
2.#nav li a span {
display:none;
}
3.#nav a:hover {
position: relative;
}
4.#nav a:hover span {
display:block;
position:absolute;
top: 0;
left: 0;
cursor: pointer;
}
5.#nav li a:hover,#nav li a:hover span {
color: #FFFFFF;
background: #DC4E1B;
}
</style>
<html>
<ul id= "nav ">
<li> <a> A <span> a </span> </a> </li>
</ul>
</html>
以上是在同一个STYLE里面的，我加上序号为了描述简单点。
1）逗号的作用不是将同样的定义应用于多个选择符吗，但第1和第5都有个#nav li a:hover span ，两者定义的样式color,background都不同的,这应该怎么理解呢？
2）第3的#nav li a:hover与第5的#nav a:hover这两者有什么区别？
3）希望哪位兄弟能为我解释下这六个都是哪几种情况的样式。
谢谢，多多指教
------解决方案--------------------
1）首先应该先回答你的2）
2）#nav li a:hover指id=nav里面li元素的链接a的悬停样式
#nav a:hover指id=nav里面的链接a的悬停样式(会使 <a> B </a> 具有此样式)
<ul id= "nav ">
<a> B </a>
<li> <a> A <span> a </span> </a> </li>
</ul>
1）逗号是这个意思，下面应该不用解释了
<style type= "text.css ">
1.#nav li a,#nav li a:hover span {
line-height: 20px;
text-decoration: none;
background: #DDDDDD;
color: #666666;
display: block;
width: 80px;
text-align: center;
overflow:hidden;
}
2.#nav li a span {
display:none;
}
3.#nav a:hover {
position: relative;
}
4.#nav a:hover span {
display:block;
position:absolute;
top: 0;
left: 0;
cursor: pointer;
}
5.#nav li a:hover,#nav li a:hover span {
color: #FFFFFF;
background: #DC4E1B;
}
</style>
<html>
<ul id= "nav ">
<li> <a> A <span> a </span> </a> </li>
</ul>
</html>
以上是在同一个STYLE里面的，我加上序号为了描述简单点。
1）逗号的作用不是将同样的定义应用于多个选择符吗，但第1和第5都有个#nav li a:hover span ，两者定义的样式color,background都不同的,这应该怎么理解呢？
2）第3的#nav li a:hover与第5的#nav a:hover这两者有什么区别？
3）希望哪位兄弟能为我解释下这六个都是哪几种情况的样式。
谢谢，多多指教
------解决方案--------------------
1）首先应该先回答你的2）
2）#nav li a:hover指id=nav里面li元素的链接a的悬停样式
#nav a:hover指id=nav里面的链接a的悬停样式(会使 <a> B </a> 具有此样式)
<ul id= "nav ">
<a> B </a>
<li> <a> A <span> a </span> </a> </li>
</ul>
1）逗号是这个意思，下面应该不用解释了
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
