CSS - 选择所有表格单元格或表格

Question

我希望将所有表格单元格设置为背景颜色：蓝色，当它们位于具有class =＆＃34; p1＆＃34;的表格内时。以下是有效的，但很长：

table.p1 > tbody > tr > td,
table.p1 > thead > tr > td,
table.p1 > tbody > tr > th,
table.p1 > thead > tr > th{
    background-color:blue;
}

是否有更短/更优雅的方式来定义此CSS规则？

编辑：只有表格＃34; p1＆＃34;可以设置样式，并且没有其他子项（例如这些单元格中的嵌套表）

Answer 1

我要解决的三件事：

1. table.p1过于具体。这不是最佳做法。
2. 我会考虑包括＆＃34; table＆＃34;在班级名称中，其含义是显而易见的。

3. 除非您计划嵌套tbody，否则thead，tr和td级别是不必要的。

   .table-p1 td, .table-p1 th { background-color:blue; }

编辑：鉴于对问题的更新嵌套要求，我建议创建两个表类：

.table-normal td, .table-normal th { background-color: grey; }

.table-p1 td, .table-p1 th { background-color: blue; }

然后你可以在.table-normal里面为嵌套表添加.table-p1类，并避免使用所有这些花哨的脆弱选择器。

Answer 2

想出一个更短的版本。我记得你可以为任何元素使用星号*。知道table标签可能只是立即包含tbody / thead，而tr可能只是立即包含td / th，我将CSS类修改为以下内容：

.p1 > * > tr > * {
    background-color:blue;
}

Answer 3

如果这是您的要求，您需要使用直接儿童选择器，那么我不相信您有任何办法可以做到这一点。您可以删除中间的空白区域，但这是关于它的。只有其他方法是将特定的类名添加到要定位的单元格中...