CSS&覆盖嵌套元素上的样式 [英] CSS & Overriding Styles on Nested Elements
问题描述
这来自另一个问题，这里，但我
在设计网站时，设计人员很可能将一组通用样式放在一个网站。 （Div / Spans / H1 / H2s中的文本的标准字体）
对于表，它们可能也定义默认的网站边框和对齐方式...例如
表
{
border：dotted 1px＃333333;
padding：2px;然而，如果你在一个表中有一个表（从 http://stackoverflow.com/users/55747/rsolberg\"> RSolberg 的示例，DataGrid中的AJAX Calender），则您的父级&嵌套表将继承这些样式。 （假设这就是为什么他们叫Cascading）
我的问题是什么是最好的做法，应用样式最顶层的元素，而没有子元素也继承他们。
如果您只是提供覆盖，您可以撤消所应用的任何样式。
表
{
border：dotted 1px＃333333;
padding：2px
}
表表
{
border：solid 0px＃000000;
padding：0px;
}
解决方案 ：
< html>
...
< body> ;.
< div>
< div>
< div>
< div>
< / body>
< / html>
您可以仅将样式应用于 div 使用子选择器（> ）的 body 元素的子元素如下：
body> div
{
border：solid 1px orange;
}
嵌套的div 不会得到边框。
有关详情，请访问： http://www.w3.org/TR /CSS2/selector.html#child-selectors 。
请注意，Internet Explorer 6不支持子选择器。
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)
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)
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;
}
If you have HTML like this:
<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:
body > div
{
border:solid 1px orange;
}
The nested div will not get a border.
For more information please visit: http://www.w3.org/TR/CSS2/selector.html#child-selectors.
Please note that Internet Explorer 6 does not support the child selector.
这篇关于CSS&覆盖嵌套元素上的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
