CSS-嵌套DIV：清除子樣式
[英]CSS - Nested DIV : Clear Sub Styles
問題描述
我確信由於CSS的性質和級聯，是否甚至有可能這樣做，但是我還是會嘗試的。
我正在創建一個“條款和條件”框，其中將包含用戶將選擇的一些關鍵元素。 由於T＆C將具有表單組件（單選按鈕，復選框）。 我真的不想麻煩將其放入IFrame並以這種方式獲取用戶輸入的麻煩。
我想使用一個帶有overflow：auto屬性的東西，我可以創建一個帶有T＆C的滾動框，並讓用戶以這種方式選擇他們的選項。
好吧，因為T＆C具有一些標記，這些標記會直接受到站點CSS的影響，所以我需要找出一種方法來使該div不使用站點的主要CSS。
這是一些示例代碼，與我嘗試的方法類似：
<html>
<head>
<style>
div
{
border: solid 1px #000;
}
div small
{
font-size: 17pt;
}
</style>
</head>
<body>
<div style="overflow: auto; width: 500px; height: 300px;">
<small>This is small text</small>
<div>
<small>This is small text</small>
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Donec vulputate mi sed nisl blandit sed porttitor massa fringilla.
</div>
</div>
</body>
</html>
這樣的結果是一個帶有一些文本的漂亮的黑框，然后是一個包含更多文本的子框，這里的關鍵項是包裹在<small/>的文本。
有什么辦法可以使某個div下的任何內容都不繼承CSS？ 也許我需要采取一種完全不同的方法。
思想？ 想法？ 建議？
提前致謝！
3 個解決方案
解決方案1
4 已采納 2009-05-12 16:37:55
與其直接使用標簽名稱，不如保留兩組類（“內部”和“外部”）並使用它們。
因此，您可以有一個div.inner定義和一個div.outer定義，並分別對其進行處理。 不過， inner必須顯式撤消outer的設置。
就像是
<div class="outer">
<div class="outer">Some content. <small>Small text.</small></div>
<div class="inner container">
<small>Blah blah blah</small>
More content
</div>
</div>
然后在CSS中定義所需的內容
div.outer {
border: 1px solid black;
}
div.outer small {
font: 17pt;
}
div.inner {
border: none;
}
div.inner small {
font: 15pt;
}
div.container {
overflow: auto;
width: 500px;
height: 300px;
}
解決方案2
0 2009-05-12 16:42:41
不要認為沒有不繼承CSS的方法。 我認為唯一的方法是顯式“重置”其父代上設置的所有樣式。 有關默認屬性的列表，請參見例如http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ 。
解決方案3
0 2009-05-12 17:37:00
作為第二個要點，沒有辦法固有地防止樣式的級聯，畢竟級聯定義了CSS。 因此，您可以減少使用Welbog建議的.inner和.outer方法。
因此，您可以像通常那樣減少定義主文檔的樣式。 但是，要為T＆C div下的相同元素覆蓋這些樣式，則必須顯式覆蓋/重新設置樣式。 您可以使用兩個樣式表來保持清晰度，但是您必須記住，在t_and_c.css以包含div的id的每個t_and_c.css明顯式t_and_c.css ，例如：
#t&c p {...}
#t&c a:link,
#t&c a:visited {...}
重置DIV和所有嵌套元素的CSS樣式
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.