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

最新推荐文章于 2023-04-03 19:13:55 发布

aspnet2002web

最新推荐文章于 2023-04-03 19:13:55 发布

阅读量1.1w

点赞数

分类专栏： .NET与CSS样式文章标签： div css border float class

本文链接：https://blog.csdn.net/aspnet2002web/article/details/7600352

版权

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

2 篇文章 0 订阅

订阅专栏

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的内容垂直居中呢，在样式中加如下内容就可以：

height: 100px;
line-height: 100px;

3、如果仅想让上面的汉字垂直居中，而让下面的英文姓名垂直靠上。可以为此DIV增加一个class样式让line-height: 0px;就可以了

aspnet2002web

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
CSS相邻选择器(>)选择子元素而不包含该子元素的子元素，及如何让DIV中的内容垂直居中

1、CSS 相邻选择器“>”，其作用是选择某元素子元素，而不包含该子元素的子元素 #stuList>div { background: #EBFFEB; cursor: pointer; float: left;
复制链接

扫一扫

专栏目录