嵌套元素上的CSS和覆盖样式
[英]CSS & Overriding Styles on Nested Elements
问题描述
This came up from another question that was asked here but I figure it's something that probably has a "Best Practice" Approach. 
这是来自这里提出的另一个问题，但我认为这可能是一种“最佳实践”方法。
When designing a website, the designer will most likely put together a set of generic styles for all elements within a website. 在设计网站时，设计师很可能会为网站中的所有元素组合一组通用样式。 (Standard Fonts for Text in Divs/Spans/H1/H2s) （Div / Spans / H1 / H2s中文本的标准字体）
In the case of tables, they may be defining default sitewide borders and alignments as well... eg 在表的情况下，它们可能也定义了默认的站点范围边界和对齐...例如
Table
{
border: dashed 1px #333333;
padding: 2px;
}
However if you have a table within a table (from RSolberg 's example, an AJAX Calender within a DataGrid) then both your parent & nested tables will both inherit these styles. 但是，如果表中有一个表（来自RSolberg的示例，DataGrid中的AJAX日历），那么您的父表和嵌套表都将继承这些样式。 (Suppose that's why they're called Cascading) （假设这就是为什么他们被称为Cascading）
My question is what's the best practice for applying styles to top most elements without having sub-elements also inherit them. 我的问题是将样式应用于最顶层元素的最佳实践是什么，而没有子元素也继承它们。
Should you just provide an override which undoes whatever styling you've applied. 你应该只提供一个覆盖来撤消你应用的任何样式。
eg 例如
Table
{
border: dashed 1px #333333;
padding: 2px;
}
Table Table
{
border: solid 0px #000000;
padding: 0px;
}
4 个解决方案
解决方案1
12 已采纳 2009-04-21 18:43:20
If you have HTML like this: 如果您有这样的HTML：
<html>
...
<body>
<div>
<div>
<div>
<div>
</body>
</html>
You could apply styles only to the div that is child of the body element using the child selector ( > ) like this:您可以使用子选择器 （ > 将样式仅应用于) like this:body元素的子元素div ， > ) like this:
body > div { border:solid 1px orange; } The nested div will not get a border. 嵌套的div不会获得边框。
For more information please visit: 欲了解更多信息，请访问： http://www.w3.org/TR/CSS2/selector.html#child-selectors . http://www.w3.org/TR/CSS2/selector.html#child-selectors 。
Please note that Internet Explorer 6 does not support the child selector . 请注意，Internet Explorer 6不支持子选择器 。
解决方案2
3 2009-04-21 18:30:48
Yes. 是。 The "table table" rule will override the "table" rule because it's more specific . “表格表”规则将覆盖“表格”规则，因为它更具体 。 What you described is the best way to have one style for the outermost table and another style for inner tables -- assuming neither table has a class or ID that would allow you to use more semantic selectors. 您所描述的是为最外层表创建一个样式和为内部表设置另一个样式的最佳方法 - 假设两个表都没有允许您使用更多语义选择器的类或ID。
In practice, you're more likely to need to use this technique with lists. 实际上，您更有可能需要将此技术用于列表。
ol { list-style: upper-roman }
ol ol { list-style: upper-alpha }
ol ol ol { list-style: lower-roman }
ol ol ol ol { list-style: lower-alpha }
解决方案3
1 2009-04-21 18:36:26
Add a class or id to the outer table: 向外表添加一个类或id：
<style type="text/css">
.outer {border: dashed 1px #333333;}
</style>
</head>
<body>
<table class="outer">
<tr><td>before inner table.
<table>
<tr>
<td>Inside inner table.</td>
</tr>
</table>
After inner table.
</td>
</tr>
</table>
</body>
If you can't add id's or classes to the HTML and assuming the table you want to style is not within another table, you could style it by specifying what element is is a child of: 如果您无法在HTML中添加id或类，并假设您要设置样式的表不在另一个表中，则可以通过指定哪个元素是以下子元素来设置它的样式：
div > table {border: dashed 1px #333333;}
Although that selector was only implemented in IE7 so if you need to support IE6 you will have to use the override method from the question. 虽然该选择器仅在IE7中实现，但如果您需要支持IE6，则必须使用问题中的覆盖方法。
解决方案4
0 2009-04-21 18:54:12
I would agree with your initial idea on this one however it does depend on the circumstance. 我同意你对这个问题的初步想法，但这取决于具体情况。
Always create the base rule and add to the stylesheet with exceptions to that rule. 始终创建基本规则并添加到样式表以及该规则的例外情况。
For example if you are sure that a table within a table will definately never need the same style applied to it then use the "table table" selector to set the style. 例如，如果您确定表中的表肯定永远不需要应用相同的样式，那么使用“表格表”选择器来设置样式。 If however that may only occur once then set a class on the parent table and amend your "table table" selector to be something along the lines of "table.parent table". 但是，如果只发生一次，那么在父表上设置一个类，并修改“table table”选择器，使其成为“table.parent table”的行。
However "parent" should be changed to a descriptive name for the element, like calendar as that is what it is. 但是，“父”应该更改为元素的描述性名称，就像日历一样。 You should not name a class after a particular style because if the style changes it makes no sense any longer. 您不应该在特定样式之后命名一个类，因为如果样式发生更改则不再有意义。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.