Combining :not() selectors in CSS(在 CSS 中组合 :not() 选择器)

本文介绍了在 CSS 中组合 :not() 选择器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试选择 table 中的所有 tr 元素，第三个和第四个除外.我设法通过使用:

I'm trying to select all tr elements inside a table, except the third and fourth. I managed to do so by using:

#table tr:not(:nth-child(3)):not(:nth-child(4))

我想合并这些选择器，因为我还有一些 :nth-child 条目.像这样的东西，但它不起作用:

I'd like to combine those selectors because I've some more :nth-child entries. Something like this, but it didn't work:

#table tr:not(:nth-child(3), :nth-child(4))

这确实在 jQuery 中有效，但在 CSS 中无效.我正在使用 Chrome(我只需要它在那里工作).

This does work in jQuery, but not in CSS. I'm using Chrome (and I only need it to work there).

我无法找到适合这种情况的组合选择器.如何将选择器与 :not 结合使用?

I've not been able to find a combining selector for this case. How can I combine selectors with :not?

推荐答案

Selectors level 3 只允许一个 :not() 伪类中的简单选择器" rel="noreferrer">简单选择器.作为一个 jQuery 选择器，它之所以有效，是因为 jQuery 扩展了它的 :not() 功能以允许 any 选择器(如 .not() 方法).

Selectors level 3 does not allow anything more than a single simple selector within a :not() pseudo-class. As a jQuery selector, it works because jQuery extends its :not() functionality to allow any selector (like the .not() method).

但是，您的第二种语法是建议的 对 :not() 的增强之一 在 Selectors 4 中，与您的第一个相同.尽管示例(在撰写本文时仍然显示)显示了 :not() 选择器链，但提案中说:

However, your second syntax is one of the proposed enhancements to :not() in Selectors 4, and works equivalently to your first. Although the example (shown as of this writing anyway) shows a chain of :not() selectors, the proposal says:

否定伪类:not(X) 是一个以选择器列表作为参数的函数式表示法.它表示其参数未表示的元素.

The negation pseudo-class, :not(X), is a functional notation taking a selector list as an argument. It represents an element that is not represented by its argument.

这里的选择器列表只是一个以逗号分隔的选择器列表.

Here a selector list is simply a comma-separated list of selectors.

如果需要对包含组合符(>、+、~、空格等的选择器取反，例如div p)，你不能在 CSS 中使用 :not()；您必须使用 jQuery 解决方案.

If you need to negate selectors that contain combinators (>, +, ~, space, etc, for example div p), you can't use :not() in CSS; you'll have to go with the jQuery solution.

这篇关于在 CSS 中组合 :not() 选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！