CSS相邻选择器(>)选择子元素而不包含该子元素的子元素，及如何让DIV中的内容垂直居中

最新推荐文章于 2025-05-13 08:52:33 发布

原创最新推荐文章于 2025-05-13 08:52:33 发布 · 1.1w 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#div #css #border #float #class

.NET与CSS样式专栏收录该内容

2 篇文章

订阅专栏

本文介绍了CSS中相邻选择器的使用方法，演示了如何仅选中直接子元素而不影响更深层次的后代元素。此外，还讲解了如何通过设置高度和行高使DIV内的文本实现垂直居中显示。

1、CSS 相邻选择器“>”，其作用是选择某元素子元素，而不包含该子元素的子元素

<!DOCTYPE HTML>
<html>
<head>
    <style type="text/css">
        
        #stuList>div
        {
            background: #EBFFEB;
            cursor: pointer;
            float: left;
            width: 100px;
            height: 100px;
            margin: 10px 10px;
            margin-left:0px;
            border: 1px solid #316ac5;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div id="stuList"">
        <div>
            张 三
            <div style="vertical-align:top">
                Zhang San</div>
        </div>
        <div>
            李 四
            <div style="vertical-align:top">
                Li si</div>
        </div>
    </div>
</body>
</html>

#stuList的子元素div背景变色了，但子元素的子元素并未变色，只运行结果如下：

如果把CSS中的大于号去掉，#stuList>div改为#stuList div，#stuList的子元素div背景变色，子元素的子元素也变色，如下：

2、如何让DIV的内容垂直居中呢，在样式中加如下内容就可以：