嵌套元素上的CSS和覆蓋樣式
[英]CSS & Overriding Styles on Nested Elements
問題描述
這是來自這里提出的另一個問題，但我認為這可能是一種“最佳實踐”方法。
在設計網站時，設計師很可能會為網站中的所有元素組合一組通用樣式。 （Div / Spans / H1 / H2s中文本的標准字體）
在表的情況下，它們可能也定義了默認的站點范圍邊界和對齊...例如
Table
{
border: dashed 1px #333333;
padding: 2px;
}
但是，如果表中有一個表（來自RSolberg的示例，DataGrid中的AJAX日歷），那么您的父表和嵌套表都將繼承這些樣式。 （假設這就是為什么他們被稱為Cascading）
我的問題是將樣式應用於最頂層元素的最佳實踐是什么，而沒有子元素也繼承它們。
你應該只提供一個覆蓋來撤消你應用的任何樣式。
例如
Table
{
border: dashed 1px #333333;
padding: 2px;
}
Table Table
{
border: solid 0px #000000;
padding: 0px;
}
4 個解決方案
解決方案1
12 已采納 2009-04-21 18:43:20
如果您有這樣的HTML：
<html>
...
<body>
<div>
<div>
<div>
<div>
</body>
</html>
( > 您可以使用 （ ) like this:> 將樣式僅應用於) like this:body元素的元素div ， > ) like this:
body > div { border:solid 1px orange; } 嵌套的div不會獲得邊框。
欲了解更多信息，請訪問： http://www.w3.org/TR/CSS2/selector.html#child-selectors 。
. 請注意，Internet Explorer 6不支持 。
解決方案2
3 2009-04-21 18:30:48
是。 “表格表”規則將覆蓋“表格”規則，因為它更具體 。 您所描述的是為最外層表創建一個樣式和為內部表設置另一個樣式的最佳方法 - 假設兩個表都沒有允許您使用更多語義選擇器的類或ID。
實際上，您更有可能需要將此技術用於列表。
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
向外表添加一個類或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>
在這里看到它
如果您無法在HTML中添加id或類，並假設您要設置樣式的表不在另一個表中，則可以通過指定哪個元素是以下子元素來設置它的樣式：
div > table {border: dashed 1px #333333;}
在這里看到它
雖然該選擇器僅在IE7中實現，但如果您需要支持IE6，則必須使用問題中的覆蓋方法。
解決方案4
0 2009-04-21 18:54:12
我同意你對這個問題的初步想法，但這取決於具體情況。
始終創建基本規則並添加到樣式表以及該規則的例外情況。
例如，如果您確定表中的表肯定永遠不需要應用相同的樣式，那么使用“表格表”選擇器來設置樣式。 但是，如果只發生一次，那么在父表上設置一個類，並修改“table table”選擇器，使其成為“table.parent table”的行。
但是，“父”應該更改為元素的描述性名稱，就像日歷一樣。 您不應該在特定樣式之后命名一個類，因為如果樣式發生更改則不再有意義。
嵌套元素上的CSS和覆蓋樣式僅部分起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.