display代码错误点

来源:4-1 display属性

随心_0014

2017-09-11 14:04:18

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>display属性</title>

        <style type="text/css">

            ul {width:200px;}

            /*补充样式*/

            li{display:none;}

            h2:hover li{display:block;}

            

        </style>

    </head>

    <body>

        <ul>

            <h2>家电</h2>

            <li>冰箱</li>

            <li>空调</li>

            <li>洗衣机</li>

        </ul>

    </body>

</html>


写回答

2回答

樱桃小胖子

2017-09-12

~是匹配任何在目标元素之后的同级元素,即h2~li就是h2和li拥有相同的父级,可以使用这个~让h2和li关联。因此可以选择的到。祝学习愉快!

2

怎么都被占用了呢

2017-09-11

h2与li是同级关系,所以不能使用后代选择器,而且li要想在同一行排列的话,可以设置display:inline-blockhttp://climg.mukewang.com/59b62bad0001082406080504.jpg

0
hly__Away
h 老师 h2:hover li{display: inline-block;} 这样不显示 h2:hover~li{display: inline-block;} 加个~就可以了,这个能解释下为什么吗?
h017-09-12
共1条回复

0 学习 · 36712 问题

查看课程