Html 子样式被父样式CSS覆盖（不同问题）

对不起。。我只是对其他答案有点困惑，所以

我有两张桌子， 其中一个在桌子里呈现。（表中的表）

IDName信息
1.
约翰
我命令
1CA09-WYOMING-BR

风格

表1.详细信息{
边框：1px纯红；
边界塌陷：塌陷；
/*等等…大约20行代码*/
}
表1.1详细信息td{
边框：1px纯红；
背景：红色；
/*等等…大约20行代码*/
}
主表{
边框：1px纯黑；
边界塌陷：塌陷；
}
table.master td{
边框：1px纯黑；
背景：灰色；
}

细节表样式未正确呈现，因为已被父表CSS覆盖。 我知道有！重要信息标记以使子CSS样式不被覆盖，但是如果CSS样式包含大约20行代码，我应该添加'！对所有人来说都是重要的标签

?

---

不需要

！重要信息

此处。。。颠倒样式的顺序。将

master

表的css放在

detail

之前。您的方式是，首先应用

详细信息

的css，然后应用

主文件

css，覆盖为

详细信息

设置的内容

或者，如果不想移动css，可以将选择器更新为

table.master table.detail{}

和

table.master table.detail td{}

---

一般来说，我使用>来避免无意中设置嵌套元素的样式

.master > tr > td
{
    ....
}

事实上，由于我总是使用tbody，它更像：

.master > tbody > tr > td

---

我不喜欢惊喜，所以我尽量小心地编写css，它非常明确地描述了它的样式。当然，它有点慢，但我发现它对用户体验来说无关紧要，而且我可以更快地完成任务。当然，其他人可能会有不同的做法。

只是对这个答案进行一点扩展：这是因为CSS是从上到下应用的，并且应用于元素的所有decenter。应用于

table.master td

的样式会影响

table.master

下的所有

td

元素（其decentants）。如果您只想更改直接子对象，则应查看

子组合器选择器。

.master > tr > td
{
    ....
}

.master > tbody > tr > td