Html CSS表格'；s文本对齐覆盖特定单元格'；文本对齐？

我希望我的整个表格有“中心”文本对齐，除了一些特定的单元格有“右”文本对齐。在我的代码中，CSS更具体地针对一个单元格，但更一般的赋值是覆盖的。这是为什么？我该如何修复它

.data td{
文本对齐：居中；
}
.动物{
文本对齐：右对齐；
}

动物种类
喜爱的食物
猫
老鼠

CSS选择器是从最小到最具体的解释，因此增加CSS选择器的特殊性以使其工作

我建议不要使用

！重要信息

，因为这将使CSS在将来更难添加到/覆盖

还有一个例子，它可以帮助您理解为什么您的CSS没有像您预期的那样覆盖其他规则

.data td{
文本对齐：居中；
}
.数据td.动物{
文本对齐：右对齐；
}

动物种类
喜爱的食物
猫
老鼠

CSS选择器是从最小到最具体的解释，因此增加CSS选择器的特殊性以使其工作

我建议不要使用

！重要信息

，因为这将使CSS在将来更难添加到/覆盖

还有一个例子，它可以帮助您理解为什么您的CSS没有像您预期的那样覆盖其他规则

.data td{
文本对齐：居中；
}
.数据td.动物{
文本对齐：右对齐；
}

动物种类
喜爱的食物
猫
老鼠

td将覆盖.data。由于动物有更多的控制权，因此它也会进行类似操作

.data td{
文本对齐：居中；
}
.数据.动物{
文本对齐：右对齐；
}

动物种类
喜爱的食物
猫
老鼠

td将覆盖.data。由于动物有更多的控制权，因此它也会进行类似操作

.data td{
文本对齐：居中；
}
.数据.动物{
文本对齐：右对齐；
}

动物种类
喜爱的食物
猫
老鼠