码迷,mamicode.com
首页 > Web开发 > 详细

X .CSS选择符

时间:2015-03-05 12:25:14      阅读:156      评论:0      收藏:0      [点我收藏+]

标签:

子选择符

子选择符用法:

标签1>标签2{声明;}

标签2必须是标签1的子元素,标签1必须是标签2的父元素,不能是其他之外的祖先元素

以下CSS代码是Bootstrap中的样式节选,用于处理表格

 1 .table {                                     
 2   width: 100%;
 3   max-width: 100%;
 4   margin-bottom: 20px;
 5 }
 6 .table > thead > tr > th,              
 7 .table > tbody > tr > th,              
 8 .table > tfoot > tr > th,
 9 .table > thead > tr > td,              
10 .table > tbody > tr > td,
11 .table > tfoot > tr > td {
12   padding: 8px;                        
13   line-height: 1.42857143;
14   vertical-align: top;
15   border-top: 1px solid #ddd;      
16 }
17 .table > thead > tr > th {
18   vertical-align: bottom;                   
19   border-bottom: 2px solid #ddd;        
20 }

可以看出从第6~11行都是采用了子选择符用于处理表格中的th和td,上级元素分别是table、thead、tr,只有在满足这样的层次结构下的th OR td才能被选择

技术分享

紧邻同胞选择符

紧邻同胞选择符的用法

标签1+标签2{声明;}

标签2和标签1有同一个祖先元素,且标签2紧跟在同胞元素标签1后面,下面是Bootstrap中对于同一表格中两个表体的处理

.table > tbody + tbody {                  
  border-top: 2px solid #ddd;
}

这段CSS样式,用于在同一个表格的 不同表体之间添加一条2px的实线,最终选择的是后一个tbody

 

X .CSS选择符

标签:

原文地址:http://www.cnblogs.com/tao-zi/p/4315053.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!