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

【问题标题】：Complex CSS selector - how to require visible复杂的 CSS 选择器 - 如何要求可见
【发布时间】：2018-01-03 20:31:15
【问题描述】：

我正在编写一个 CSS 选择器，到目前为止我一直在工作：

input[placeholder*='mail']

但我想确保它没有找到不可见（即：不可见）的元素。

我一直在模式中的各个地方尝试:visible（因为我在 CSS 选择器词法分析器上找不到好的参考，但运气不好：

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

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

【问题讨论】：

你想做什么？它只是在 jQuery 中的 CSS oder 中吗？
我正在使用 selenium 来解析网页。 Selenium 有一种通过 CSS 选择器查找元素的方法。
没有 :visible CSS 选择器...
那么如何使用 CSS 选择器来做到这一点？
什么会使它不可见？一个类，一个内联样式，...？

标签： javascript jquery html css

【解决方案1】：

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

而且你不能在像placeholder.这样的元素属性上使用它

要检查是否有输入值（这会使占位符“不可见”），您需要使用一些客户端代码。

jQuery 看起来像这样：

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

要“过滤掉不可见的元素”并只保留可见的元素：

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

.hidden{
  display:none;
}

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

【讨论】：

为什么要“检查是否有输入值”？这如何暗示可见性或缺乏可见性？对不起，如果我很密集。我真的只是想过滤掉不可见的 DOM 元素。
我理解您的问题的方式...您希望定位具有不可见占位符的 VISIBLE 元素。
我编辑了...因为，我一开始误解了你的问题。

【解决方案2】：

:visible 没有 CSS 选择器。然后，您应该使用类并定位具有类.visible 的元素。（或者没有课程.visible。

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

【讨论】：

嗯，我真的只是想过滤掉不可见的 DOM 元素，只选择那些可见的。有没有办法做到这一点？

【解决方案3】：

你不能只使用 CSS。

但是你可以用 jquery 来做，很可能this answer 可以帮助你。

【讨论】：

我真的只是想过滤掉不可见的 DOM 元素。没有jQuery有没有办法做到这一点？
当我关注你的问题时，没有办法。