避免将 css 样式应用于子元素

Question

有没有办法让父标签样式不适用于子标签元素？

我必须显示一些数据，所以我希望将它们在表格中对齐以便更好地查看。我想对表格应用一些样式以使其看起来不错。我在我的表中使用了一些额外的组件（如插件）。因此，如果我确实将任何样式应用于我的表的 tr 标签，那么这些样式也会应用于这些组件标签，如果它们具有 tr 标签。这不应该发生...

有什么办法可以避免继承吗？

 <style>
 /*The plug-in component may have table tr tags.So the following styles should be applied to plug-in..*/
     table tr{
     background:#434334;
     border-radius:5px;
    }

</style>

Answer 1

CSS 旨在像那样继承。如果你想“不继承”，你有几个选择：

1. 最佳：改进您的选择器，使其仅适用于您需要它们的元素
2. 好：如果现有标记不允许您执行上述操作，请为需要设置样式的元素提供一个额外的属性（例如 extra class）来帮助您改进选择器
3. 不好的：编写你的选择器以便它们全局应用，然后编写更多的选择器以逐案“撤消”结果

在您的情况下，看起来前两者的组合会起作用。你可以给id="foo"你的表一个，然后将选择器更改为

table#foo > tbody > tr { /*...*/ }

的>是子选择，这防止了样式被施加到表中的行进一步向下元素树。