避免应用于子元素的CSS样式

是否有任何父子标签样式不适用于子标签元素的方式？避免应用于子元素的CSS样式

我必须显示一些数据，所以我希望在表中对齐它们以获得更好的视图。我想在桌子上应用一些样式，使其看起来很好。我在表格中使用了一些额外的组件（如插件）。因此，如果我将任何样式应用于表格的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>

来源

2012-03-27 Rama Rao M

CSS意味着像那样继承。如果你想“不继承”你有几个选择：

最佳：提高你的选择，使它们只适用于你需要他们
良好的要素：如果现有的标记不不允许您执行上述操作，通过给予需要设置样式的元素（例如，额外的class）以帮助您改进选择器
错误：编写您的选择器以便它们适用然后编写更多的选择器来“撤消”结果以个案为基础

在你的情况，它看起来像前两个组合的工作。你可以给一个id="foo"你的表，然后选择更改为

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

的>是child selector，防止被应用到表行进一步下跌的元素树的风格。

来源

2012-03-27 12:33:53 Jon

一种解决方案是命名你的风格table tr.style1{ ...，然后在每个<tr>的，你可以只添加一个class属性，即<tr class="style1">。

来源

2012-03-27 12:33:36

避免应用于子元素的CSS样式

回答

相关问题