避免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>

- Rama Rao M

Answer 1

CSS是这样设计的，可以像继承一样继承。如果你想要“不继承”，有几个选项：

1. 最佳：改进你的选择器，使它们只适用于你需要的元素
2. 好的：如果现有的标记不允许你执行上述操作，则通过为需要进行样式设置的元素添加其他属性（例如额外的class）来提供帮助，以便你可以改进选择器
3. 不好的：编写选择器，使其全局应用，然后编写更多的选择器，以按情况撤消结果

在你的情况下，似乎前两种方法的结合会起作用。你可以给你的表格添加一个id="foo"，然后将选择器更改为

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

> 是子选择器，它防止样式被应用到元素树中更深的表格行。

- Jon

Answer 2

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

- Barry Kaye