CSS相鄰選擇器(>)選擇子元素而不包含該子元素的子元素，及如何讓DIV中的內容垂直居中
阿新 • • 發佈：2018-12-26
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;就可以了