【问题标题】:CSS style elements within <th> scope<the> 范围内的 CSS 样式元素
【发布时间】:2016-11-10 15:05:57
【问题描述】:

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

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

【问题讨论】:

  • 您是否要为整行或整列或标题赋予样式???
  • 整行或整列。我相信 BoltClock 的回答很好地解决了这个问题。

标签: html css css-selectors html-table


【解决方案1】:

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

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

也许这样的特性可能值得为 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 或其他文档中找到它吗?
猜你喜欢
  • 2013-11-01
  • 1970-01-01
  • 1970-01-01
  • 2012-07-16
  • 2021-01-19
  • 2012-12-17
  • 1970-01-01
  • 1970-01-01
  • 2013-03-12
相关资源
最近更新 更多