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;就可以了




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值