h3:hover~.elec ,老师这里为什么用“~”，还有我的白色边框怎样才能填充满
来源：4-7 编程练习
慕盖茨0037328
2019-09-21 22:43:33
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display属性</title>
<style type="text/css">
/*样式补充*/
div{background-color:#eaeaea;width:150px;border:1px solid lightgrey;text-align:center;}
.big{margin:0px auto;}
.elec,.wash,.clothes{display:none;background-color:white;padding:0px auto;margin:0px opx;padding:2em;line-height:2em;border:1px lightgrey solid;}
h3:hover~.elec{display:block;}
h3:hover~.wash{display:block;}
h3:hover~.clothes{display:block;}
</style>
</head>
<body>
<div class="big">
<div class="div1">
<h3>家电</h3>
<ul class="elec" type="none">
<li>冰箱</li>
<li>洗衣机</li>
<li>空调</li>
</ul>
</div>
<div class="div2" >
<h3>洗护</h3>
<ul class="wash" type="none">
<li>洗衣液</li>
<li>消毒液</li>
<li>柔顺剂</li>
</ul>
</div>
<div class="div3">
<h3>衣物</h3>
<ul class="clothes" type="none">
<li>衬衫</li>
<li>裤子</li>
<li>卫衣</li>
</ul>
</div>
</div>
</body>
</html>
1回答
-
同学你好， 这里的~表示选择后边的所有兄弟元素。 因为h3和ul是兄弟元素， 所以使用了~符号，选择h3后面的兄弟元素ul.
白色边框没有填充满，是因为如下图所示的margin属性值存在语法错误， 导致效果实现有误差。 另， 由于padding值没有auto属性值，默认值是0， 虽然这样写不会报错，不过还是建议修改了， 让代码更加规范
示例：
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~~~
1
相似问题