X .CSS选择符

子选择符

子选择符用法：

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

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

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

.table {                                     
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;
}
.table > thead > tr > th,              
.table > tbody > tr > th,              
.table > tfoot > tr > th,
.table > thead > tr > td,              
.table > tbody > tr > td,
.table > tfoot > tr > td {
  padding: 8px;                        
  line-height: 1.42857143;
  vertical-align: top;
  border-top: 1px solid #ddd;      
}
.table > thead > tr > th {
  vertical-align: bottom;                   
  border-bottom: 2px solid #ddd;        
}

可以看出从第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