CSS样式中的 nav ul li ul 与 nav>ul>li

问题:CSS样式中的 nav ul li ul 与 nav>ul>li 这两种写法的区别是什么,“>”的作用是什么,谢谢。

    <style>
        *{
            margin:0;
            padding:0;
            list-style:none;
        }

        nav ul li ul{
            display:none;
        }

        nav>ul>li{
            float:left;
            padding:10px;
            border:1px solid blue;
        }

        nav>ul>li>ul>li{
            padding:10px;
            border-bottom:1px solid #ccc;
        }
    </style>

查看全部 4 个回答

0

>是指只能一代接一代,比如: nav>ul>li>ul>li,必须是下面这样的

            <nav>
                <ul>
                    <li>
                        <ul>
                            <li></li>
                        </ul>
                    </li>
                </ul>
            </nav>

然后nav ul li ul只要求后面的元素是在nav标签下的顺序即可,对中间隔了几层不敏感,比如:

            <nav>
                <div>
                    <ul>
                        <div>
                            <a>
                                <li>
                                    <div>
                                        <ul>
                                            <li>
                                            </li>
                                        </ul>
                                    </div>
                                </li>
                            </a>
                        </div>
                    </ul>
                </div>
            </nav>

推荐答案

4
<nav>
    <ul id="a">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li>
            <ul id="b">
                <li></li><li></li>
            </ul>
        </li>
        <li>
            <ul id="c">
                <li></li><li></li>
            </ul>
        </li>
    </ul>
</nav>

nav>ul只选择nav下一级里面的ul元素,例如上面dom结构里id为a的ul。
nav ul选择nav内所包含的所有ul元素,例如上面dom结构里面id为a、b、c的全部ul。

nav>ulnav ul限定更严格,必须后面的元素只比前面的低一个级别。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>纯CSS菜单</title> <style> *{ margin:0; padding:0; } li{ list-style:none; text-align:center; line-height:24px; } a{ text-decoration:none; color:#333333; font-size:12px; line-height:24px; display:block; } .nav ul li{ width:120px; float:left; border:1px #333 dashed; background:#FFD2D2; } .nav ul li ul{ display:none; } .nav ul li a:hover{ color:#fff; background-color:#BB0916; } .nav ul li:hover ul,.nav ul li a:hover ul { display:block; width:120px; height:24px; } .nav ul li ul li { background-color:#FEE; width:120px; } .nav ul ul li a:hover{ background:#F7F7B9; color:#666666; } </style> </head> <body> <div class="nav"> <ul> <li><a href="#">首页</a> <ul> <li><a href="#">最新更新</a></li> <li><a href="#">下载排行</a></li> </ul> </li> <li><a href="#">企业新闻</a> <ul> <li><a href="#">企业介绍</a></li> <li><a href="#">最新动态</a></li> </ul> </li> <li><a href="#">产品信息</a> <ul> <li><a href="#">最新产品</a></li> <li><a href="#">产品列表</a></li> </ul> </li> <li><a href="#">特价促销</a> <ul> <li><a href="#">促销</a></li> <li><a href="#">最新推荐</a></li> <li><a href="#">产品列表</a></li> </ul> </li> <li><a href="#">联系我们</a> <ul> <li><a href="#">公司信息</a></li> <li><a href="#">联系我们</a></li> <li><a href="#">公司地图</a></li> </ul> </li> <li><a href="#">新手论坛</a> <ul> <li><a href="#">你问我答</a></li> <li><a href="#">网站大学堂</a></li> <li><a href="#">论坛</a></li> </ul> </li> </ul> </div> </body> </html>
06-13
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值