【基础学习-css】4.css组合选择器

组合选择器

名称 组合器 备注
选择器组 A,B 匹配满足A(和/或)B的任意元素
后代选择器 A B 匹配B元素,满足条件:B是A的后代结点(B是A的子节点,或者A的子节点的子节点)
子选择器 A > B 匹配B元素,满足条件:B是A的直接子节点
相邻兄弟选择器 A + B 匹配B元素,满足条件:B是A的下一个兄弟节点(AB有相同的父结点,并且B紧跟在A的后面)
通用兄弟选择器 A ~ B 匹配B元素,满足条件:B是A之后的兄弟节点中的任意一个(AB有相同的父节点,B在A之后,但不一定是紧挨着A)

组合选择器示例

html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<table lang="en-US" class="with-currency">
<thead>
<tr>
<th scope="col">Product</th>
<th scope="col">Qty.</th>
<th scope="col">Price</th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="2" scope="row">Total:</th>
<td>148.55</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Lawnchair</td>
<td>1</td>
<td>137.00</td>
</tr>
<tr>
<td>Marshmallow rice bar</td>
<td>2</td>
<td>1.10</td>
</tr>
<tr>
<td>Book</td>
<td>1</td>
<td>10.45</td>
</tr>
</tbody>
</table>

css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
/* 基本的table样式 */
table {
font: 1em sans-serif;
border-collapse: collapse;
border-spacing: 0;
}

/* 所有在table里的td以及th,这里的逗号不是一个组合器,
它只是允许你把几个选择器对应到相同的CSS规则上.*/
table td, table th {
border : 1px solid black;
padding: 0.5em 0.5em 0.4em;
}

/* 所有table里的thead里的所有th */
table thead th {
color: white;
background: black;
}

/* 所有table里的tbody里的所有td(第一个除外),每个td都是由它上边的td选择 */
table tbody td + td {
text-align: center;
}

/*table里所有的tbody里的td当中的最后一个 */
table tbody td:last-child {
text-align: right
}

/* 所有table里的tfoot里的th */
table tfoot th {
text-align: right;
border-top-width: 5px;
border-left: none;
border-bottom: none;
}

/* 在table当中,所有的th之后的td */
table th + td {
text-align: right;
border-top-width: 5px;
color: white;
background: black;
}

/* 定位在“with-currency”类中拥有属性lang并且这个属性值为en-US的元素中的,最后td(:last-child)节点的前面(::before)*/
.with-currency[lang="en-US"] td:last-child::before {
content: '$';
}

/* 定位在“with-currency”类中拥有属性lang并且这个属性值为fr的元素中的,最后td(:last-child)节点的后面(::after) */
.with-currency[lang="fr"] td:last-child::after {
content: ' €';
}

本文作者: haise
本文地址https://www.shifeng1993.com/2018/11/01/base_css4/
版权声明: 转载请注明出处!