Html 嵌套元素上的 CSS 和覆盖样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/773933/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS & Overriding Styles on Nested Elements
提问by Eoin Campbell
This came up from another question that was asked herebut 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)
在设计网站时，设计师很可能会为网站内的所有元素组合一组通用样式。（Divs/Spans/H1/H2s 中文本的标准字体）
In the case of tables, they may be defining default sitewide borders and alignments as well... e.g.
在表格的情况下，他们也可能定义默认的站点范围边界和对齐方式......例如
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. (Suppose that's why they're called Cascading)
但是，如果表中有一个表（来自RSolberg的示例，DataGrid 中的 AJAX 日历），那么您的父表和嵌套表都将继承这些样式。（假设这就是它们被称为级联的原因）
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.
您是否应该提供一个覆盖来撤消您应用的任何样式。
e.g.
例如
Table
{
border: dashed 1px #333333;
padding: 2px;
}
Table Table
{
border: solid 0px #000000;
padding: 0px;
}
回答by knut
If you have HTML like this:
如果你有这样的 HTML：
<html>
...
<body>
<div>
<div>
<div>
<div>
</body>
</html>
You could apply styles only to the divthat is child of the bodyelement using the child selector(>) like this:
你可以应用样式只给div那就是儿童body使用元素子选择器（>) like this:
body > div
{
border:solid 1px orange;
}
body > div
{
border:solid 1px orange;
}
The nested divwill not get a border.
The nested 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 不支持子选择器。
回答by Patrick McElhaney
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.
是的。“table table”规则将覆盖“table”规则，因为它更具体。您所描述的是为最外层表使用一种样式而为内表使用另一种样式的最佳方法——假设这两个表都没有允许您使用更多语义选择器的类或 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 }
回答by Sam Hasler
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>
See it here
看这里
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:
如果您无法将 id 或类添加到 HTML 并假设您想要设置样式的表格不在另一个表格中，您可以通过指定哪个元素是以下元素的子项来设置样式：
div > table {border: dashed 1px #333333;}
See it here
看这里
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，则必须使用问题中的覆盖方法。
回答by John_
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.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.
但是，“父”应该更改为元素的描述性名称，就像日历一样。不应以特定样式命名类，因为如果样式更改，则不再有意义。
