老师代码已经实现了，不过还有几个问题
来源：4-2 编程练习
yarwood
2020-06-26 22:55:31
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display属性</title>
<style type="text/css">
div {
width: 200px;
}
/*补充样式*/
li{display:none;}
a{text-decoration:none;color:black;}
div:hover li{display:inline;}
</style>
</head>
<body>
<div>
<h2><a href="#">家电</a></h2>
<ul>
<li>冰箱</li>
<li>空调</li>
<li>洗衣机</li>
</ul>
</div>
</body>
</html>
h2:hover鼠标经过会不显示，用他的父级就可以显示
ul和li的问题，div:hover ul{display:inline;}显示的是有序列表，但是他的子级li就显示块级的方式
这两个问题我没理解，是只能死记硬背吗？
3回答
-
qq_慕运维6460539
2020-07-05
第一个问题：我理解的是因为CSS选择器的书写方式导致你这样写，是一个后代选择器，而ul和h2是同级的，ul并不是h2的子标签。所以h2:hover li...就没效果，hover只能写到他的父标签div上。
第二个问题：
因为li也是块级元素，如果是ul{display:inline}，那li依旧是块级元素，单独占据一行。
我也正在学习，一起加油！！！！
0 -
好帮手慕粉
2020-06-27
同学你好，关于同学的问题回答如下：
1、在第一次代码中，设置了li为inline，也就是行内元素，所以会在一行显示：
2、在同学的第二次代码中，设置的是ul，display: inline这个属性并不能作用到li标签上。所以不会在一行显示：
祝学习愉快~
0 -
好帮手慕粉
2020-06-27
同学你好，关于同学的问题回答如下：
1、h2:hover li这样的方式，鼠标经过会不显示，是因为这个选择器的意思是：当鼠标移上h2标签时，其下的子元素li显示出来，但是li标签并不是h2的子元素，所以选择不到。
2、这个问题老师不太明白同学说的意思呢：
同学可以再详细描述一下，或者将对应的代码粘贴上来。
祝学习愉快~
0h020-06-27
相似问题