1. first-of-type和last-of-type

h1 .flex span:first-of-type {
font-size: 0.7em;
}

h1 .flex span:last-of-type {
font-size: 1.2em;
}

1. calc()方法基于其它数据计算

.example {
margin: 10px;
width: calc(100% - 20px);
}

1. 选择所有带class的元素

years span[class] {

font-weight: bold;
width: 4.5rem;
}

1. 选择所有非某class的元素

span:not(.sr-only) {
font-weight: normal;
}

1. 让表格和里面单元格都没有边

table {
border-collapse: collapse;
border: 0;
}

1. 固定表格宽度

tbody td {
width: 100vw;
max-width: 4rem;
min-width: 4rem;
}

1. 选择系列元素的某一个

tr[class="total"] {
border-bottom: 4px double #0a0a23;
}

1. The key difference between tr[class="total"] and tr.total is that the first will select tr elements where the only class is total. The second will select tr elements where the class includes total.
2. 按照顺序选择元素

tr.total td:nth-of-type(3) {
padding-right: 0.5rem;
}

1. 选择相同元素里某个class的元素

td.current {
font-style: italic;
}