X .CSS選擇符

子選擇符

子選擇符用法：

標籤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