避免应用于子元素的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. 好：如果现有标记不允许您执行上述操作，请通过为需要设置其他属性（例如额外class）样式的元素提供帮助允许您改进选择器
3. 错误：编写您的选择器以便全局应用，然后根据具体情况编写更多选择器以“撤消”结果

在您的情况下，它看起来像前两个的组合将起作用。您可以为表格提供id="foo"，然后将选择器更改为

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

>是child selector，它会阻止样式应用于元素树下方的表行。

Answer 2

一种解决方案是为您的样式table tr.style1{ ...命名，然后在每个<tr>中添加class属性，即<tr class="style1">。