Column combinator
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
Bộ kết hợp cột (||) được đặt giữa hai bộ chọn CSS. Nó chỉ khớp những phần tử khớp với bộ chọn thứ hai mà thuộc về các phần tử cột được bộ chọn đầu tiên chọn.
css
/* Table cells that belong to the "selected" column */
col.selected||td {
background: gray;
}
Cú pháp
css
/* The white space around the || combinator is optional but recommended. */
column-selector || cell-selector {
/* style properties */
}
Ví dụ
HTML
html
<table border="1">
<colgroup>
<col span="2" />
<col class="selected" />
</colgroup>
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td colspan="2">D</td>
<td>E</td>
</tr>
<tr>
<td>F</td>
<td colspan="2">G</td>
</tr>
</tbody>
</table>
CSS
css
col.selected||td {
background: gray;
color: white;
font-weight: bold;
}
Kết quả
Đặc tả
| Specification |
|---|
| Selectors Level 4 # selectordef-column |
Tương thích trình duyệt
Hiện tại, không có trình duyệt nào hỗ trợ tính năng này.