子元素选择器设置下边框,为什么所以的子元素都出现下边框了

图片描述

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab选项卡</title>
    <style>
        *{
            padding:0;
            margin:0;
            list-style:none;
            font-size:12px;
        }
        body{
            background-color:#eee;
        }
        #tabs{
            width:300px;
            margin:50px auto;
            background-color:#fff;
        }
        #title li{
            float:left;
            width:60px;
            text-align:center;
            line-height:30px;
        }
        #title ul>li{
            border-bottom:1px solid red;
        }
    </style>
</head>
<body>
    <div id="tabs">
        <div id="title">
            <ul>
                <li>公告</li>
                <li>规则</li>
                <li>论坛</li>
                <li>安全</li>
                <li>公益</li>
            </ul>
        </div>
        <div id="content">
            <ul>
                <li>阿里苏宁发布"新三体"战略 打造未来十年格局</li>
                <li>高诚信会员无条件信任 200余万广告商品被处罚</li>
            </ul>
            
        </div>
    </div>
</body>
</html>
阅读 2.8k
2 个回答
#title ul>li 就是指#title下的ul下的子元素li

> 这个子选择器表示匹配某个元素下的所有子元素,比如 ul > li,意思是匹配 ul 标签下的所有 li 标签,题主应该是理解错了。

扩展一下:如果题主想要只针对第一个 li 标签进行下划线标识,那么可以使用 :first-child 选择器(相关知识点希望题主自行谷歌哈~);或者粗暴一点就直接对第一个元素进行 id 或者 class 标识。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题