CSS Selector将div中包含的输入与特定类匹配？

Question

我有这种情况

<div class="hidden">
  <input name="bar-foo" value="test"> 
</div>
<div class="hidden">
  <input name="bar-foo-baz" value="test2">
</div>
<div class="nothidden">
  <input name="bar-foo" value="test3"> <!-- should be selected -->
</div>
<div class="nothidden">
  <input name="foo-bar-baz" value="test4"> <!-- should be selected -->
</div>

我需要匹配包含单词foo和bar的输入,不包含在div中哪个类是"隐藏"的.

input[name*="foo"][name*="bar"] 

匹配所有四个输入.

:not(.hidden) input[name*="foo"][name*="bar"]

在我看来,应该匹配未包含在类'.hidden'中的输入,但事实并非如此.我如何实现这一结果？

这是一个jsfiddle https://jsfiddle.net/8dLbz5ws/1/

Answer 1

您的第二个选择器:not(.hidden) input[name*="foo"][name*="bar"]匹配所有输入,因为它们都包含在一些没有隐藏类的元素中(例如,body另一个父div).

您可以通过更具体来解决问题:

:not(.hidden) > input[name*="foo"][name*="bar"]

这将过滤掉.hidden直接父母的那些.

编辑

一些评论者想知道如何选择所有未包含在任何 .hidden元素中的输入(不一定是直接父母).这是一个更棘手的问题.下列:

input[name*="foo"][name*="bar"]:not(.hidden input)

似乎没有用,我认为因为:not只允许内部相对简单的选择器.我能想到的唯一方法是更新所有选定的输入,然后在任何元素中取消更新它们.hidden:

input[name*="foo"][name*="bar"] { color: red; }
.hidden input[name*="foo"][name*="bar"] { color: black; }

这只有在默认设置(即color: black)是均匀的时候才会起作用我害怕.