<the> 范围内的 CSS 样式元素

Posted 2023-03-06

【中文标题】<the> 范围内的 CSS 样式元素

【英文标题】：CSS style elements within <th> scope

【发布时间】：2016-11-10 15:05:57

【问题描述】：

在 html 中，可以为表格标题单元格 (<th>) 赋予 scope 属性，以标识它是否与随后的列、行或它们的组相关联。是否可以使用 CSS 选择器来设置与标题单元格关联的所有表格单元格 (<td>) 的样式？即，如果scope="row" 设置整行样式，scope="column" 设置列设置样式？

假设答案可能是“否”：那么scope 属性的作用是什么（CSS [attribute=value] 选择器除外）？浏览器是否将其用于可访问性选项？还是我作为开发者应该忽略它？

【问题讨论】：

您是否要为整行或整列或标题赋予样式???

整行或整列。我相信 BoltClock 的回答很好地解决了这个问题。

【参考方案1】：

是否可以使用 CSS 选择器来设置与标题单元格关联的所有表格单元格 (<td>) 的样式？即，如果scope="row" 设置整行样式，scope="column" 设置列设置样式？

选择器 3 和选择器 4 都没有提供匹配与特定表格标题单元格关联的表格单元格的功能。最接近的是列组合器，它尚未实现，仅适用于 HTML 表中基于列的标题，并且不携带任何标题单元语义。特别是，scope 属性对列组合器的行为没有影响，它不区分<th> 和<td>。

也许这样的特性可能值得为 Selectors 5 提议（列组合器和 :*-column() 伪类很可能无论如何都会结束）。

假设答案可能是“否”：那么scope 属性的用途是什么（CSS [attribute=value] 选择器除外）？浏览器是否将其用于可访问性选项？还是我作为开发者应该忽略它？

一些用户代理可能会利用scope 属性来构建更有意义的表表示。 HTML5 spec 描述了一个表模型，当前实现可能使用也可能不使用。 scope 属性参与此表模型。

如果所有这些对于作为作者的您来说都是希腊语，那么它基本上归结为您想要在标记中包含多少元数据。越多越好。

【讨论】：

我通常看不起任何“死代码”，除非它大大有助于可读性。但也许我应该更宽容地使用 HTML 属性，因为它们可以代替 cmets，而这在 HTML 标记中是不允许的。

【参考方案2】：

.tableClass th[scope=col] 
    styleme: beautiful;

【讨论】：

一个好的答案有一个更好的解释How do I write a good answer?

我看到这行得通，但是任何人都可以在 MDN 或其他文档中找到它吗？