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中的类隐藏＆＃39;隐藏＆＃39;。

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

匹配所有四个输入。

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

在我看来，

应该匹配未包含在类＆＃39; .hidden＆＃39;中的输入，但它不会。我如何实现这一结果？

这是一个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）统一时我才会这样做。

Answer 2

这对我有用。

https://jsfiddle.net/1dd2a3sw/

<input type="file" style="display: none" #file/>
<button type="button" class="btn" (click)="file.click()" Browse </button

Answer 3

改变如下：

div:not(.hidden) input[name*="foo"][name*="bar"] {
    background-color: yellow;
}

div:not(.hidden) input[name*="foo"][name*="bar"] {
	background-color: yellow;
}

<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>

Answer 4

尝试仅定位未隐藏的类的直接子项，如下所示：

:not(.hidden) > input[name*="foo"][name*="bar"] { color:blue; }

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

4 个答案: