Javascript 是否有CSS:可见（滚动）选择器？

我只想使用CSS更改可见元素的样式。是否有一个选择器可以执行此操作？它只需要与Chrome和Firefox一起使用。（我正在构建一个扩展/插件）

如果没有，有没有一种方法可以用轻javascript更改可见元素的样式

---

---

在当前滚动位置内可见。元素可以不在滚动视图中，也可以部分可见。

这看起来像一个

：可见的选择器：

EDIT：在“无CSS”警告之前看到了您的
javascript
标记

但是这是一个CSS选择器。
使用纯CSS无法选择不可见的元素


但是，如果您有一个类名或其他选择器，那么使用jquery可以执行以下操作

jQuery(selector).each(function(){
    Var $this=$(this);
    if ($this.css('visibility')==='hidden')
       //set your style
})

编辑：编辑后，绝对无法仅使用CSS选择视口中的内容。这是一种与上下文无关的语言

但是，您始终可以使用jquery来摆弄元素偏移位置，并确定它是否在当前视口中（window.scrollposition或类似的内容）。但是，这种类型的解决方案很快就会变得混乱。
没有标准的纯CSS规则来评估可见性

正如其他人所说，jQuery（如果您想使用jQuery）既有一个
：visible
，又有在任何给定的jQuery对象上执行
.is（':visible'）
，以在任何给定的DOM元素上使用
.css（“display”）
或
.css（“visibility”）
获得计算样式的能力

在普通javascript中，确定对象是否可见并不特别简单，因为您必须获得computedStyle（考虑所有可能影响元素的CSS规则），并且必须确保没有父对象被隐藏而导致子元素被隐藏。这是我个人图书馆中的一个功能：

//----------------------------------------------------------------------------------------------------------------------------------
// JF.isVisible function
//
// Determines if the passed in object is visible (not visibility:hidden, not display: none 
// and all parents are visible too.
//
// Source: http://snipplr.com/view/7215/javascript-dom-element-visibility-checker/
//----------------------------------------------------------------------------------------------------------------------------------
JF.isVisible = function(obj)
{
    var style;

    if (obj == document) return true;

    if (!obj) return false;
    if (!obj.parentNode) return false;
    if (obj.style) {
        if (obj.style.display == 'none') return false;
        if (obj.style.visibility == 'hidden') return false;
    }

    //Try the computed style in a standard way
    if (window.getComputedStyle) {
        style = window.getComputedStyle(obj, "")
        if (style.display == 'none') return false;
        if (style.visibility == 'hidden') return false;
    } else {
        //Or get the computed style using IE's silly proprietary way
        style = obj.currentStyle;
        if (style) {
            if (style['display'] == 'none') return false;
            if (style['visibility'] == 'hidden') return false;
       }
    }

    return JF.isVisible(obj.parentNode);
};

没有一种纯粹的CSS方法可以做到这一点。正如Kirean的评论所说，为什么您只想设计可见元素的样式？不可见元素无论如何都不会显示其样式。如果不希望不可见元素占用空间（又名，布局），则应使用
display:none

如果您真的想要一个选择器来选择可见元素，那么可以按照Widor的建议使用jQuery。您可以首先使用jQuery选择可见元素，向它们添加一个类，然后使用CSS按该类选择元素

$('div:visible').addClass('visibleElement');


.visibleElement {
  color: red;
}

如果您已经在使用jQuery，那么有一个插件允许您使用css选择器选择视口中的内容。它肯定不是纯CSS，但似乎是目前最接近的解决方案（同样，假设您可以使用jQuery）。您可能需要执行以下操作：

$(window).scroll(function () {
    $('.interestingElements:in-viewport').addClass('iSeeYou');
});

希望最终会有一个本地CSS替代方案。
为什么只需要为可见项设置样式？设置不可见元素的样式没有任何作用如果您愿意使用jQuery，它有一个
：visible
伪选择器。这里值得注意的是，display:none和visibility:hidden对用户来说都是不可见的，但有着截然不同的含义。在考虑“隐形”和“可见”的含义时，请记住这一点。ShivanRaptor可能他们的商业案例不包括IE。如果是这样，我想要他们的商业案例！但总的来说，我同意，解决方案不是解决方案，除非它在任何地方都有效。@ShivanRaptor如果你正在为Firefox开发一个插件，你的声明还重要吗？如其他解决方案所示，有一种更简单的方法可以做到这一点。@davide cannizzo-我拒绝了你对这个答案的编辑，因为尽管鼓励你提交一个替代解决方案作为答案（或对这个答案进行评论），但编辑现有的[特别是被接受的]答案是不合适的。见：