对 html 标签中的每个元素应用效果，除了一个元素（ID/类）答案

【问题标题】：Apply an effect on each element in html tag except one element (ID/class)对 html 标签中的每个元素应用效果，除了一个元素（ID/类）
【发布时间】：2019-09-28 11:46:30
【问题描述】：

当用户单击/引发事件时，我想对除一个 ID（或类）之外的 html 页面的每个元素应用效果。我该怎么做？我尝试使用 :not() 选择器，但我认为它不适合它。

MWE：

index.html

<html>
  <head>
    <link disabled id="toggle_element" rel="stylesheet" href="./new_theme.css">
    <link rel="stylesheet" href="./style.css">
    <script src="./script.js" type="text/javascript"></script>
  </head>
  <body>
    <h1> Some text </h1>
    <button id="fixedbutton" onclick="change()">CLICKME</button>
    <button  id="anotherfixedbutton">please let me sleep me here firefox</button>
  </body>
</html>

style.css

html {
}

#fixedbutton {
  position: fixed;
  bottom: 20px;
  right: 20px;
}
h1{
  color:blue;
}

#anotherfixedbutton {
  position:fixed; 
  bottom:20px; 
  left: 20px
}

new_theme.css

html {
  filter: invert(100%) hue-rotate(180deg);
  -webkit-filter: invert(100%) hue-rotate(180deg);
  -moz-filter: invert(100%) hue-rotate(180deg); 
  -o-filter: invert(100%) hue-rotate(180deg);
  -ms-filter: invert(100%) hue-rotate(180deg);
}

script.js

function change()
{
  document.getElementById("toggle_element").disabled = false;
}

我想从过滤器的效果中排除固定按钮。此示例运行良好，在 Chrome 和 Safari 中没有问题，但在 Firefox 中，按钮只是失去了它们的位置。

【问题讨论】：

只为那些你想要应用效果的元素添加一个类
@HabibMhamadi：一个大网站的东西太多了，做不到。
我已根据您更新的代码更新了我的答案。

标签： html css css-selectors

【解决方案1】：

好的，所以跟进编辑并查看相关帖子，这里有很多内容需要解压。在您的 original closed question 和经过编辑的这个新问题之间，我看到了您正在尝试解决的一个（也许是两个？）问题：

当您应用过滤器时，在 Firefox 中按钮会失去其位置。
您希望（也许？）按钮不受过滤器的影响。

我创建了一个稍作修改的 sn-ps，它适用于您的代码并解决了这两个问题：

关于按钮放置的问题：

function change()
{
  document.getElementsByTagName('html')[0].classList.toggle('new-theme');
}

html {
  height: 100%; /* Fixes the buttons losing position in firefox */
}

.new-theme {
  filter: invert(100%) hue-rotate(180deg);
  -webkit-filter: invert(100%) hue-rotate(180deg);
  -moz-filter: invert(100%) hue-rotate(180deg); 
  -o-filter: invert(100%) hue-rotate(180deg);
  -ms-filter: invert(100%) hue-rotate(180deg);
}

#fixedbutton {
  position: fixed;
  bottom: 20px;
  right: 20px;
}
h1{
  color:blue;
}

#anotherfixedbutton {
  position:fixed; 
  bottom:20px; 
  left: 20px
}

<html>
  <head>
  </head>
  <body>
    <h1> Some text </h1>
    <button id="fixedbutton" onclick="change()">CLICKME</button>
    <button  id="anotherfixedbutton">please let me sleep me here firefox</button>
  </body>
</html>

对于按钮在 Firefox 上丢失位置的解决方案是将 height: 100% 添加到 html 元素。有点奇怪，但类似于Temani Afif's answer on the purported duplicated of your original question；基本上，因为过滤器创建了一个新的包含块上下文，我们需要进行一些调整。

从滤镜效果中排除按钮：

function change()
{
  document.getElementsByTagName('html')[0].classList.toggle('new-theme');
}

html {
  height: 100%; /* Fixes the buttons losing position in firefox */
}

.new-theme {
  filter: invert(100%) hue-rotate(180deg);
  -webkit-filter: invert(100%) hue-rotate(180deg);
  -moz-filter: invert(100%) hue-rotate(180deg); 
  -o-filter: invert(100%) hue-rotate(180deg);
  -ms-filter: invert(100%) hue-rotate(180deg);
}

.new-theme #fixedbutton,
.new-theme #anotherfixedbutton {
  filter: invert(100%) hue-rotate(180deg);
  -webkit-filter: invert(100%) hue-rotate(180deg);
  -moz-filter: invert(100%) hue-rotate(180deg); 
  -o-filter: invert(100%) hue-rotate(180deg);
  -ms-filter: invert(100%) hue-rotate(180deg);
}

#fixedbutton {
  position: fixed;
  bottom: 20px;
  right: 20px;
}
h1{
  color:blue;
}

h2 {
  color: orange;
}

#anotherfixedbutton {
  position:fixed; 
  bottom:20px; 
  left: 20px
}

<html>
  <head>
  </head>
  <body>
    <h1> Some text </h1>
    <h2> Some other text </h2>
    <button id="fixedbutton" onclick="change()">CLICKME</button>
    <button  id="anotherfixedbutton">please let me sleep me here firefox</button>
  </body>
</html>

再说一次，我不确定这是否是您想要的效果。但无论如何，这里的问题是按钮的颜色反转不是因为它们被.new-theme 选择器选中，而是因为它们包含在 .new-theme-classed 元素中，该元素具有过滤器应用到它。但是，由于您只是在反转您正在使用的过滤器，因此您可以在这些特定按钮位于 .new-theme-classed 元素中时为它们再次反转它们，返回它们的原始色调。

【讨论】：

当然，这是一个可行的示例，但我的问题是应用于 html{} 然后排除一个元素。例如，Firefox 中的过滤器只会干扰所有固定位置的元素。因此，我想在横向应用效果时排除这些元素。 ``` html .button(#skipme){ 过滤器：反转（50%）色相旋转（90度）； -webkit-filter：反转（50%）色调旋转（90度）； -moz 过滤器：反转（50%）色调旋转（90 度）； -o-filter：反转（50％）色调旋转（90度）； -ms-filter：反转（50%）色调旋转（90度）； ``` 将不起作用（可能是我做错了）。
@Andy_Jake - 好的，所以听起来这个问题比我理解的要多。将重要细节添加到您的问题中可能是一个好主意，以便它完全捕捉您所看到的问题的性质。否则，如您所见，问题中的模棱两可导致无法满足您的实际要求的答案。
当然，我之前问过这个问题的详细信息，但被标记为重复。 stackoverflow.com/questions/58089668/…所以，我是这样问的。
我明白了——这很公平。似乎有一些人请求重新提出您的问题。您是否可以在说明您遇到的问题的问题中创建一个 sn-p？ imo，这将是社区了解问题并为您生成解决方案的最简单方法。
感谢您正确理解我的两个问题。我愿意接受这是正确的答案，因为它回答了我对 MWE 的两个问题。但是，需要考虑一件事： 1. 解决方案height:100% 适用于适合页面高度的页面，但如果我们在更长的页面（可滚动）上尝试它，按钮的位置会再次中断。我尝试粘贴lorem ipsum 文本以使页面更长，但它又坏了。这里有任何指示吗？ 2. 然而，颜色反转完美——我想要实现的——Tx。

【解决方案2】：

您可以使用 JavaScript 并将其添加到您的代码中：（此代码不需要 css）

function highlight() {
    element = document.getElementById('not');
    document.documentElement.style.backgroundColor = '#f00';
    element.style.backgroundColor = '#fff';
}

将 id "not" 添加到您要排除的一个元素并使用 onClick="highlight()"

调用该函数

【讨论】：