使用伪类选择器构建资产负债表。了解如何在将鼠标悬停在元素上时更改元素的样式，并触发网页上的其它事件。

该篇文章为 freecodecamp Learn More About CSS Pseudo Selectors by Building A Balance Sheet 学习笔记

查看效果：balance-sheet

html caption

HTML <caption> 元素 (or HTML 表格标题元素) 展示一个表格的标题，它常常作为 <table> 的第一个子元素出现，同时显示在表格内容的最前面，但是，它同样可以被 CSS 样式化，所以，它同样可以出现在任何一个一个相对于表格的做任意位置。

css span[class~=”sr-only”]

包含 class 为 sr-only 的任何 span 元素。

css clip-path

clip-path CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。

1
2
3
4
5
span[class~="sr-only"] {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
}

定义一个 inset 矩形。

:first-of-type

该伪类选择器用于定位与选择器匹配的第一个元素。

:last-of-type

该伪类选择器用于定位与选择器匹配的最后一个元素。

calc()

calc() 此 CSS 函数允许在声明 CSS 属性值时执行一些计算。它可以用在如下场合：<length>、<frequency>, <angle>、<time>、<percentage>、<number>、或 <integer>。

1
2
/* property: calc(expression) */
width: calc(100% - 80px);

span[class]

针对任何具有 class 属性的 span 元素。

!important

CSS 中的 !important 规则用于增加样式的权重。

!important 与优先级无关，但它与最终的结果直接相关，使用一个 !important 规则时，此声明将覆盖任何其他声明。

1
2
3
4
5
6
7
8
9
10
11
12
span[class~="sr-only"] {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  width: 1px !important;
  position: absolute !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  padding: 0 !important;
  margin: -1px !important;
}

:nth-of-type

CSS 伪类基于相同类型（标签名称）的兄弟元素中的位置来匹配元素。

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