时间戳

首页 > 解决方案 > 选择溢出-y =滚动不起作用的所有元素

css - 选择溢出-y =滚动不起作用的所有元素

问题描述

再会

我正在尝试做一些应该很简单但运气不佳的事情。我想选择具有以下 CSS 属性和值的所有元素：

overflow-y: scroll

以下是我根据两篇独立且相互冲突的 W3Schools 文章尝试过的内容：

*[overflow-y=scroll] {
  background-color: red;
}

*[overflow-y="scroll"] {
  background-color: red;
}

有问题的文章是这些：

https://www.w3schools.com/css/css_attribute_selectors.asp

https://www.w3schools.com/cssref/sel_attribute_value.asp

请问有谁知道我在这里做错了什么？我将不胜感激任何建议

标签： csssass

解决方案

问题是在您链接的文章中，CSS 搜索的是 HTML 属性，而不是 CSS 属性。因此，您可以使用方括号来搜索 HTML 属性，如下所示：

#input[type="number"] {
    background-color: red;
}

<input type="number" placeholder="Enter your age">

但不幸的是，您不能以相同的方式访问 CSS 属性。

解决方案 1：CSS

假设您overflow-y使用 CSS 进行设置，您可以使用相同的选择器来设置background-color. 例如：

.scrollCont {
    overflow-y: scroll;
    background-color: red;
}

解决方案2：JS

您可以遍历元素并检查是否overflow-y具有scroll.

[...document.querySelectorAll("*")].forEach(elem => {
    if (getComputedStyle(elem).getPropertyValue("overflow-y") == "scroll")
        elem.style.backgroundColor = "red";
});

推荐阅读