重学前端009 --- 响应式网页设计 CSS 伪选择器

​​aria-hidden=“true” 属性详解​​

​​1. 作用​​
aria-hidden=“true” 是一个 ​​ARIA（无障碍富互联网应用）属性​​，用于告诉​​屏幕阅读器等辅助技术​​ 忽略该元素及其子元素，使其不会被朗读出来。

选择器将选择任何 span 元素，其 class 包括 sr-only。

span[class~="sr-only"] {border: 0;
}

​​clip: rect(1px,1px,1px,1px); 和 clip-path: inset(50%); 详解​​

这两个 CSS 属性通常用于 ​​视觉隐藏元素​​（但保留其在 DOM 中的位置），常见于​​无障碍优化​​（如屏幕阅读器可访问但视觉不可见的内容）。

​​overflow: hidden; 和 white-space: nowrap;

overflow: hidden;​​
作用​​：​​隐藏超出容器边界的内容​​（不显示滚动条）。
常用于：防止内容溢出破坏布局。实现文本截断（搭配 text-overflow: ellipsis 显示省略号）。

white-space: nowrap;​​ ​​
作用​​：​​强制文本不换行​​（即使容器宽度不足，文本也会在一行内显示）。
默认情况下，文本会在空格或换行符处换行，nowrap 会禁用这一行为。

gap: 10px 20px;

/* 行间距 10px，列间距 20px */

gap 是一个用于 ​​控制元素间间隔（间距）​​ 的 CSS 属性，可以替代传统的 margin 或 padding 来更简洁地设置行列间距。它适用于 ​​Flexbox（弹性布局）​​ 和 ​​Grid（网格布局）​​ 容器。

:first-of-type 伪选择器用于定位匹配选择器的第一个元素。 :last-of-type
伪选择器以匹配选择器的最后一个元素为目标。

position 属性值

position 是 CSS 中用于控制元素定位方式的重要属性，它有以下几个值：

值	说明
​​static​​ (默认值)	元素按照正常文档流排列 top, right, bottom, left 和 z-index 属性无效
​​relative​​ (相对定位)	元素相对于其正常位置进行定位 不影响其他元素的布局 使用 top, right, bottom, left 调整位置 保留元素在文档流中的原始空间
​​absolute​​ (绝对定位)	元素相对于最近的定位祖先元素(非 static)进行定位 从文档流中移除，不保留原始空间 如果没有定位祖先，则相对于初始包含块(通常是视口)
​​fixed​​ (固定定位)	元素相对于视口定位 从文档流中移除，不保留原始空间 滚动页面时元素位置固定不变
​​sticky​​ (粘性定位)	元素根据滚动位置在 relative 和 fixed 之间切换 必须指定 top, right, bottom 或 left 之一才有效 在跨越特定阈值前表现为 relative，之后表现为 fixed

calc() 函数是一个 CSS 函数，它允许你根据其他值计算一个值。

span[class]语法将针对任何设置了类属性的span元素，而不管该属性的值如何。

years span[class] {font-weight: bold/normal;width: 4.5rem;text-align: right;
}

:not() 伪选择器用于定位与选择器不匹配的所有元素

！import

!important 是 CSS 中的一个特殊标记，用于提高样式声明的优先级，使其覆盖其他所有相同属性的声明（包括内联样式）。

基本语法

selector {property: value !important;
}

作用原理

• 优先级提升​​：带有 !important 的样式声明会覆盖没有 !important 的相同属性声明
• ​​覆盖顺序​​：即使后面的样式声明通常具有更高优先级， !important 也能使其优先应用
• ​​例外情况​​：如果多个声明都有 !important，则按照正常的 CSS 优先级规则决定

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

:nth-of-type（）

：nth-of-type（）伪选择器用于根据特定元素在同一类型的兄弟元素之间的顺序来定位它们。使用此伪选择器来定位总表行中的第三个td元素。给它一个0.5rem的正确填充。

tr.total td:nth-of-type(3) {padding-right: 0.5rem;
}
tr.total:hover{background-color: #99c9ff;
}
td.current {font-style: italic;
}
tr.data td:last-of-type {padding-right: 0.5rem;
}