Question

由于CSS的性质和级联性，我确信这是否可行，但无论如何我都会尝试。

我正在创建条款和条件框，其中包含用户将选择的一些关键元素。由于T＆amp; C将具有表格组件（单选按钮，复选框）。我真的不想经历将它放入IFrame并以这种方式获得用户输入的麻烦。

我想使用带溢出的自动属性：我可以创建一个带有T＆amp; C的滚动框，并让用户选择他们的选项。

好吧，因为T＆amp; 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？也许我需要对此采取完全不同的方法。

思想？想法？建议

提前致谢！

Answer 1

不要直接使用标记名称，而是保留两组类（“内部”和“外部”）并使用它们。

因此，您可以拥有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;
}

Answer 2

不要认为有办法不继承css。我认为唯一的方法是明确地“重置”其父项上设置的所有样式。请参阅例如http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/以获取默认属性列表。

Answer 3

作为第二个注释，没有办法固有地阻止级联的样式，它毕竟是定义CSS的级联。因此，您可以使用Welbog建议的.inner和.outer方法。

因此，您可以像往常一样简化为主文档定义样式。但是，要在T＆amp; C div下覆盖相同元素的那些样式，您必须显式覆盖/重新样式。您可以使用两个样式表来保持清晰度，但是您必须记住，在t_and_c.css中明确地为每个声明添加封闭div的id，例如：

#t&c p {...}

#t&c a:link,
#t&c a:visited {...}

CSS - 嵌套DIV：清除子样式

3 个答案: