Javascript 使用CSS选择器获取满足multilple:not"；条件“；

我希望使用

：not

伪类从DOM中获取满足2个基本条件的任何元素

以下是我的代码行：

document.querySelectorAll（'textarea:not（[id*=xyz]）：not（[style*=hidden]））

所以我想得到任何文本区域：

作为不包含“xyx”和

在内联样式中没有“隐藏” 这似乎是在“或”的基础上，而不是在“和”的基础上

例如，它不会获取id为“xyz”的元素，因为该元素在内联样式中没有“隐藏”，因为它满足早期的条件

---

示例：我希望能够抓住这个元素：

，但不是专门使用一行JS

基于（上面引用的），实际问题似乎是忽略

id

包含

xyz

且包含

隐藏的
样式的
任何文本区域。或者，换句话说，需要选择所有不包含
id*='xyz'
和
样式*='hidden'
组合的文本区域

请注意，not（x和y）与not（x）和not（y）不同。前者是您正在寻找的代码，但后者是相关代码的功能

           |--------|---------------------------|----------------------------|
           |   y -> |           true            |           false            |
           | x      |                           |                            |
           |--------|---------------------------|----------------------------|
           | true   | not(x and y) = false      | not(x and y) = true        |
           |        | not(x) and not(y) = false | not(x) and not(y) = false  |
           |--------|---------------------------|----------------------------|
           | false  | not(x and y) = true       | not(x and y) = true        |
           |        | not(x) and not(y) = false | not(x) and not(y) = true   |
           |--------|---------------------------|----------------------------|

因此，您应该使用一组选择器来实现这一点，而不是链接
：not
。当链接
not
时，所述选择器意味着仅选择
id
不包含
xyz
且
style
不包含
hidden
的元素。这意味着注释中的第一个元素也不会被选择，因为它的
id
包含
xyz
，所以AND的一部分是falsy，这意味着整个条件是falsy

使用一组两个选择器（如下面的代码段中所示）时：


第一个元素匹配两个选择器，因此获得大纲
第二个元素与第二个选择器（但不是第一个）匹配，因此获得轮廓
第三个元素与两个选择器都不匹配，因此无法获得轮廓
第四个元素与第一个选择器（但不是第二个）匹配，因此获得轮廓
第五个元素与第二个选择器（但不是第一个）匹配，因此获得轮廓


textarea:not（[id*=xyz]），textarea:not（[style*=hidden]）{
轮廓：1px纯红；
}


示例：我希望能够抓住这个元素：
，但不是专门使用一行JS

基于（上面引用的），实际问题似乎是忽略
id
包含
xyz
且包含
隐藏的
样式的
任何文本区域。或者，换句话说，需要选择所有不包含
id*='xyz'
和
样式*='hidden'
组合的文本区域

请注意，not（x和y）与not（x）和not（y）不同。前者是您正在寻找的代码，但后者是相关代码的功能

           |--------|---------------------------|----------------------------|
           |   y -> |           true            |           false            |
           | x      |                           |                            |
           |--------|---------------------------|----------------------------|
           | true   | not(x and y) = false      | not(x and y) = true        |
           |        | not(x) and not(y) = false | not(x) and not(y) = false  |
           |--------|---------------------------|----------------------------|
           | false  | not(x and y) = true       | not(x and y) = true        |
           |        | not(x) and not(y) = false | not(x) and not(y) = true   |
           |--------|---------------------------|----------------------------|

因此，您应该使用一组选择器来实现这一点，而不是链接
：not
。当链接
not
时，所述选择器意味着仅选择
id
不包含
xyz
且
style
不包含
hidden
的元素。这意味着注释中的第一个元素也不会被选择，因为它的
id
包含
xyz
，所以AND的一部分是falsy，这意味着整个条件是falsy

使用一组两个选择器（如下面的代码段中所示）时：


第一个元素匹配两个选择器，因此获得大纲
第二个元素与第二个选择器（但不是第一个）匹配，因此获得轮廓
第三个元素与两个选择器都不匹配，因此无法获得轮廓
第四个元素与第一个选择器（但不是第二个）匹配，因此获得轮廓
第五个元素与第二个选择器（但不是第一个）匹配，因此获得轮廓


textarea:not（[id*=xyz]），textarea:not（[style*=hidden]）{
轮廓：1px纯红；
}
实现这一点的方法应该是使用此选择器：
textarea:not（[id*=“xyz”][style*=“hidden”]）
（目标textarea没有带“xyz”的id和带“hidden”的style属性）。不幸的是，它似乎还没有得到正确的实施。。。（可能是打字错误，请参见下面的代码片段）


textarea[id*=“xyz”][style*=“hidden”]{背景色：黄色}
text区域：非（[id*=“xyz”][style*=“hidden”]）{背景色：红色}
我是黄色的

我应该是红色的

我应该是红色的

我应该是红色的
实现这一点的方法应该是使用此选择器：
textarea:not（[id*=“xyz”][style*=“hidden”]）
（目标textarea没有带“xyz”的id和带“hidden”的style属性）。不幸的是，它似乎还没有得到正确的实施。。。（可能是打字错误，请参见下面的代码片段）


textarea[id*=“xyz”][style*=“hidden”]{背景色：黄色}
text区域：非（[id*=“xyz”][style*=“hidden”]）{背景色：红色}
我是黄色的

我应该是红色的

我应该是红色的

我应该是红色的
我无法重现这个问题——只有匹配所有条件的字段才匹配。根据定义，选择器的所有组件都是AND-ed。因此，问题出在其他地方。但是，在style属性中构建对特定字符串的依赖关系是一种可怕的编码实践。你应该后退一两步，我会的