如何定位 CSS 中不属于特定类的输入元素？

没有否定的 CSS 选择器

在 CSS 中，由于缺乏专用的“”，选择不符合特定条件的元素可能会很困难。不是”选择器。 Web 开发人员多年来已经认识到这一限制，促使他们寻求替代解决方案。

考虑以下 CSS 规则：

.classname input {
  background: red;
}

此规则为所有输入字段分配红色背景类名称为“classname”的 HTML 元素。但是，假设您想要从红色背景样式中排除“classname”元素内的输入字段。如何实现这一点？

当前浏览器支持

不幸的是，当前的 Web 浏览器不支持 CSS 中的负选择器。单独使用 CSS 无法实现提供的示例。

替代解决方案

虽然 CSS 缺少否定选择器，但存在替代解决方案：

• 使用 JavaScript 或 jQuery：像 jQuery 这样的 JavaScript 框架提供了像 :not() 这样的方法来选择不符合特定条件的元素。

<code class="js">$j(':not(.classname)>input').css({background:'red'});</code>

• 嵌套规则： 通过使用嵌套规则，您可以间接从样式中排除特定元素：

input {
  background: #ccc;
}

.classname input {
  background: red;
}

在此示例中，默认情况下所有输入字段都有灰色背景。在类名称为“classname”的元素中，输入字段会使用红色背景覆盖此样式。请注意，这种方法会影响“classname”元素中所有输入字段的样式，无论其位置如何。

值得注意的是，虽然浏览器对 CSS 负选择器的支持已经争论了多年，但仍然存在截至撰写本文时，尚未正式实施。随着浏览器技术的不断发展，此功能将来可能会变得可用。

以上是如何定位 CSS 中不属于特定类的输入元素？的详细内容。更多信息请关注PHP中文网其他相关文章！