CSS 特异性/继承问题

Question

我将第 3 方组件附加到 div 元素(容器)。此 div 元素位于 from 内，表单具有 cssform 类。我使用的主要 CSS 表包含定义:

.cssform div {
    max-width: 680px;
    clear: left;
    margin: 0;
    padding: 5px 0 8px 0;
    padding-left: 155px;
}

我的容器现在受此 css 影响，这使得 3rd 方组件视觉无法使用。

我如何“覆盖”或“重置”上面的 css，以便它不应用于我的容器的任何子级，特别是考虑到第 3 方组件本身在我的下面创建 div 元素也受此表单 css 的影响

编辑:

结构是

<form class="cssform">
  <section>
    <div>
      <label></label><input>            
    </div>
    <div id="container"></div>         
    <div>
      <label></label><input>            
    </div>  
  <section>
</form>

我通过简单地为除容器之外的所有 div 提供一个额外的 css 类并使用它来分配表单样式来解决此问题。这样我的容器就不会受到影响。我没有将其添加为答案，因为它是技术性的，不是我的问题的答案，而是一种解决方法。

Answer 1

如果您的 div 元素是其父容器的第三个子元素，则可以使用伪类 :not 和 :nth-child(3):

.cssform div:not(:nth-child(3)) {
    max-width: 680px;
    clear: left;
    margin: 0;
    padding: 5px 0 8px 0;
    padding-left: 155px;
}

您可能需要根据整个代码块来编辑选择器。但我相信您正在寻找的 CSS 选择器是 :not(:nth-child(n))。