将样式应用于元素，但不应用于另一个元素内的元素答案

【问题标题】：Apply styles to element but not elements inside another element将样式应用于元素，但不应用于另一个元素内的元素
【发布时间】：2016-04-26 01:44:06
【问题描述】：

假设我有一个类似的代码

<input type='text' />
<br />
<iframe>
    <input type='text'>
</iframe>

还有一种风格

input[type='text'] {
    border: 1px solid black;
}

我希望这些样式只应用于 iframe 之外的元素。我将如何实现它？我实际上正在查看 css :not 选择器，但我对如何使用它感到困惑。我想实现类似

input[type='text'], input:not(iframe) {
    border: 1px solid black
}

或将样式应用于所有文本类型的输入，但不适用于 iframe 内的文本类型输入。

【问题讨论】：

默认情况下，主页中的样式不适用于 iframe 中的元素。你能更准确地解释一下你想达到什么目标吗？
由于某种原因，定义的外部样式被应用于 iframe 内的样式。我希望这些样式不要应用在 iframe 中。顺便说一句，我正在使用 materializeCSS 框架。

标签： html css

【解决方案1】：

无法使用 CSS 选择某些元素之外的元素。

您必须创建一个具有所需样式定义的类，并将其单独应用于所有输入。

:not 选择器可用于选择所有元素，但指定为参数的元素除外，例如：:not(p) 将选择页面中除段落之外的所有元素。

【讨论】：

【解决方案2】：

input[type="text"]{border: 1px solid #000}

iframe 输入[type="text"]{border: none}

【讨论】：

我实际上已经想到了这一点，但我正在寻找一种更简单的方法来了解如何使用相同的样式，但只添加 1 行只是为了包含我不想要样式的元素被应用。我实际上正在使用一个设计框架（很像 bootstrap），所以我想停止 iframe 内的某些元素的默认行为，这些元素的样式与 iframe 外的元素具有相同的样式。
:not 仅允许用于相同标记的子元素。但这里 iframe 不是输入中的子项。

【解决方案3】：

它应该按照列出的方式工作。 iframe 是孤立的，应该有自己的样式，您是否在两个页面上都包含相同的样式表？

【讨论】：