4-2编程练习请老师解惑！

首页课程实战体系课手记专栏慕课教程

4-2编程练习请老师解惑！

来源：4-2 编程练习

Sakura丶

2019-03-17 17:00:08

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>display属性</title>
<style type="text/css">

ul{width:200px; font-family:"宋体"; }

li{ display: none}

h2:hover li{display: inline}
</style>
</head>
<body>

<ul type="none">
<h2>家电</h2>
<li>冰箱</li>
<li>空调</li>
<li>洗衣机</li>
</ul>
</body>
</html>

1. 代码中为什么 h2:hover li{display:inline} 不能正确显示 li { display:none}

2. 在 <h2>家电</h2> 前加一个单标签 <a hover="#"> <a href="#"> ，a:hover li{ dispaly:inline} 就可以显示!
a标签难道不是成对出现的么？

写回答

1回答

Steve007

2019-03-18

已采纳

同学，你好。因为

这个选择器表示的是当鼠标悬浮到h2上时，让他的后代li显示，而html结果中h2和li是同级的关系，不是后代的关系，如图：

因此样式没有生效，html中规范不是那么严格，当不写结束标签时，会将结束标签自动补全，

除了同学的写法，css样式这样写也是可以实现效果的，如图：

祝学习愉快！

hakura丶

h 谢谢老师！

h019-03-19

共1条回复

0 学习 · 40143 问题

相似问题

回答 2

回答 1

回答 1

回答 2

回答 1