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

图片描述

<!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

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

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

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

你尚未登录，登录后可以

css布局怎么保证右边一直在可视范围内？

CSS如何巧妙实现标题居中、关闭按钮居右效果？

js阻止冒泡问题？

Scss的rgba()方法无法对变量进行二次编译？

问一个鼠标滚动事件，这种是怎么实现的？

如何在CSS中实现滚动条不溢出圆角框？

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？