如何为带指定类的表格组合多标签设置CSS样式？

一、初始写法失效的原因及正确写法 #

你最初的写法.mycl table, td, th存在逻辑错误：

• .mycl table 表示class为mycl的元素内部的table，而非带mycl类的table本身
• 逗号分隔的td, th是全局选择器，会给所有表格的单元格应用样式，不符合需求

正确的写法是给每个关联选择器都明确绑定带mycl类的table：

table.mycl, table.mycl th, table.mycl td {
  border: 1px solid;
  border-collapse: collapse;
  color: green;
}

各选择器含义：

• table.mycl：选中所有带有mycl类的table元素
• table.mycl th：选中带有mycl类的table内部的th元素
• table.mycl td：选中带有mycl类的table内部的td元素

二、你的代码优化方案 #

你写出的代码已经能实现需求，但可以利用CSS的继承特性和属性专属规则进行优化，减少冗余代码：

优化后代码 #

table.mycl {
  border-collapse: collapse; /* 仅表格元素支持该属性，无需给单元格设置 */
  color: blue; /* color属性会继承给内部的th和td，无需重复声明 */
}

table.mycl th, table.mycl td {
  border: 1px solid; /* 单元格的border需要单独设置 */
}

优化点说明 #

1. 利用属性继承：color属性会从table元素自动继承到内部的th和td，因此只需在table.mycl中声明一次即可
2. 简化专属属性：border-collapse是table元素的专属属性，作用于整个表格的边框合并，不需要给th/td设置
3. 结构更清晰：将表格整体样式和单元格样式分开，便于后续维护

内容的提问来源于stack exchange，提问作者chris01