Question

我正在编写一个CSS选择器，到目前为止我已经开始工作了：

input[placeholder*='mail']

但我想确保它找不到隐形（即：不可见）元素。

我一直在模式的不同位置尝试:visible（因为我无法在CSS选择器词法分析器上找到一个很好的参考，但运气不好：

input[placeholder:visible*='mail']
input:visible[placeholder*='mail']
input[placeholder*='mail']:visible

我该怎么做？任何人都可以很好地参考学习更复杂的选择器格式吗？

Answer 1

:visible没有CSS选择器。然后，您可以使用类并定位具有类.visible的元素。（或者没有班级.visible。

:visible选择器仅在jQuery中可用，例如，它使用伪选择器查找当前滚动视图中可见的元素。

Answer 2

你不能只使用CSS。

但你可以用jquery做到这一点，很可能this answer可以帮助你。

Answer 3

:visible是一个jQuery选择器。不是CSS。

并且您无法在placeholder.

等元素的属性上使用它

要检查是否存在输入值（使得占位符＆＃34;不可见＆＃34;），您需要使用一些客户端代码。

jQuery看起来像这样：

$("input[placeholder*='mail']").each(function(){
  if( $(this).val() != "" ){
    // Do something.
    // ...
  }
});

<小时/> 要过滤掉不可见的元素＆＃34;并只保留可见的：

＆＃13;

var visible = $("input[placeholder*='mail']:visible").length;
console.log(visible+" elements are visible.");

＆＃13;

.hidden{
  display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="one" placeholder="My mail">
<input type="text" id="two" placeholder="Your mail">
<input type="text" id="three" class="hidden" placeholder="Junk mail">
<input type="hidden" id="four" placeholder="Cool mail">

＆＃13;

复杂的CSS选择器 - 如何要求可见

3 个答案: