4-3练习,怎么选中全部的li

4-3练习,怎么选中全部的li

<!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:inline;

                

            }

            

        </style>

    </head>

    <body>

        <ul>

            <h2>家电</h2>

            <li>冰箱</li>

            <li>空调</li>

            <li>洗衣机</li>

        </ul>

    </body>

</html>


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
卡布琦诺 2017-09-28 21:07:51

 h2:hover li { display:inline; }在这种写法中,h2和li是同级关系,不能发生联动,可以设置 h2:hover~li { display:inline; }使用兄弟选择器进行选择兄弟元素,使其发生联动,希望可以帮到你!

Miss路 2017-09-26 18:19:41
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>display属性</title>
        <style type="text/css">
            ul {width:200px;}
            /*补充样式*/
            li{
                display:none;
            }
            ul:hover li{
                display:inline-block;
            }
        </style>
    </head>
    <body>
        <ul>
            <h2>家电</h2>
            <li>冰箱</li>
            <li>空调</li>
            <li>洗衣机</li>
        </ul>
    </body>
</html>

参考上面的写法。祝学习愉快!

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师