1. 程式人生 > >CSS相鄰選擇器(>)選擇子元素而不包含該子元素的子元素,及如何讓DIV中的內容垂直居中

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的內容垂直居中呢,在樣式中加如下內容就可以:

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

3、如果僅想讓上面的漢字垂直居中,而讓下面的英文姓名垂直靠上。可以為此DIV增加一個class樣式讓line-height: 0px;就可以了