我将第 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 类并使用它来分配表单样式来解决此问题。这样我的容器就不会受到影响。我没有将其添加为答案,因为它是技术性的,不是我的问题的答案,而是一种解决方法。
最佳答案
如果您的 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))
。
关于CSS 特异性/继承问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58639201/