css 这样的选择器有什么区别吗?
来源:百度知道 编辑:UC知道 时间:2024/06/27 23:25:39
<style>
#menu {
font-family:Arial;
font-size:14px;
margin:0 auto 0 0;
background:url(under.gif);
}
#menu ul {
display:block;
width:500px;
padding:0 0 0 8px;
margin:0;
list-style:none;
height:35px;
}
#menu ul li {
float:left;
}
#menu ul li a{
display:block;
float:left;
line-height:35px;
color:#ddd;
text-decoration:none;
padding:0 0 0 14px;
}
#menu ul li a:hover{
color:#fff;
background: url(hover.gif);
}
#menu ul li a b{
display:block;
padding:0 14px 0 0;
}
#menu ul li a:hover b{
color:#fff;
background: url(hover.gif) no-repeat right top;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>玻璃效果菜单</title></head>
&l
#menu {
font-family:Arial;
font-size:14px;
margin:0 auto 0 0;
background:url(under.gif);
}
#menu ul {
display:block;
width:500px;
padding:0 0 0 8px;
margin:0;
list-style:none;
height:35px;
}
#menu ul li {
float:left;
}
#menu ul li a{
display:block;
float:left;
line-height:35px;
color:#ddd;
text-decoration:none;
padding:0 0 0 14px;
}
#menu ul li a:hover{
color:#fff;
background: url(hover.gif);
}
#menu ul li a b{
display:block;
padding:0 14px 0 0;
}
#menu ul li a:hover b{
color:#fff;
background: url(hover.gif) no-repeat right top;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>玻璃效果菜单</title></head>
&l
li a:hover{ }:指LI下面的A标签鼠标经过使用样式属性
li a:hover b{ }:指LI下面的A标签鼠标经过时下面的B标签使用样式属性
如:<li><a href="#"><b> Map </b></a></li>
意思是:在A标签使用样式时,B再使用样式,就像是叠加..双重样式..就是你的玻璃效果....
li a:hover{ }写处边,li a:hover b{ } 写内边
还有你问题里的bover应该是hover吧?
他们之间没什么区别
都是指鼠标经过时的样式
主要不同就是一个是对A标签使用的样式
一个是对A标签下B标签使用的样式
其它我认为这完全没必要
不信你可以只使用其中一个就可以实现效果了
两个反而会使代码多 加载速度慢
我做这这么多年的div css页面制作 还真没用过这样的两个hover叠加
没什么实际意义 不过也许对初学者诱惑大吧 漂亮的东西不一定实用
呵呵