Question

我有一张桌子，我已经给了课class1。我想写css来设置它的边框和它的列。我在下面这样做了，但是有没有办法重写将它组合成一个选择器？

.class1 {
    border: 1px solid black;
     border-collapse: collapse;
}
table.class1 td {
    border: 1px solid black;
}

Answer 1

你可以这样做：

通过组合选择器

table.class1,
table.class1 td {
  border: 1px solid black;
  border-collapse: collapse;
}

<table class="class1">
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

或

将class1与表格一起添加到表格单元格中。

.class1 { border: 1px solid black; border-collapse: collapse; }

<table class="class1"> <tr> <td class="class1">Jill</td> <td class="class1">Smith</td> <td class="class1">50</td> </tr> <tr> <td class="class1">Eve</td> <td class="class1">Jackson</td> <td class="class1">94</td> </tr> </table>

第二个会显着增加你的代码大小，也需要更多的努力，只使用一个“原子”选择器是一个肮脏的黑客。保存在CSS中的LOC不值得在HTML中工作 但这可能是您想要的，抱歉没有其他更好（有效）的方法。 < / p>
我会选择第一个，即使它是选择器的组合。

Answer 2

如果您希望与示例CSS相比具有相同的结果，则其他人提出的建议将无效。这是你的

原始CSS：

.class1 {
    border: 1px solid black;
    border-collapse: collapse;
}
table.class1 td {
    border: 1px solid black;
}

其他人建议

.class1, table.class1 td {
    border: 1px solid black;
    border-collapse: collapse;
}

但这与你的规则不一样。

与

相同

.class1 {
    border: 1px solid black;
    border-collapse: collapse;
}
table.class1 td {
    border: 1px solid black;
    border-collapse: collapse;
}

不你给我们缩短的css。

如果您不希望冗余地定义属性声明，那么

像这样：

.class1, 
table.class1 td {
    /* all properties both elements have in common */        
    border: 1px solid black; 
}
.class1 {
    border-collapse: collapse;
}

请注意，虽然border-collapse会忽略td，但这只是巧合，因为OP也可能要求完全不同的元素和样式。

Answer 3

您可以将两个选择器合并为一个，并且表格单元格将忽略边框折叠，但边框将被应用：

.class1, table.class1 td {
    border: 1px solid black;
    border-collapse: collapse;
}

Answer 4

你可以写：

table.class1,
table.class1 td {
    border: 1px solid black;
    border-collapse: collapse;
}

border-collapse: collapse;当然会忽略td，但它仍会适用于table。

参考：请参阅5.2.1 Grouping Selectors

Css：如何将表和列规范组合成单个选择器？

4 个答案:

原始CSS：

其他人建议

与

像这样：