使用 Jquery 将 css 应用于除一个元素之外的所有元素答案

【问题标题】：Apply css to all but one element with Jquery使用 Jquery 将 css 应用于除一个元素之外的所有元素
【发布时间】：2018-05-03 05:59:49
【问题描述】：

我想让我的移动导航的背景不透明度为 0.5

我正在使用这个：

$('body:not(#navigation-mobile)').css({opacity: '0.5'});

但是，当我想要除了#navigation-mobile 之外的所有东西时，整个身体都会变得不透明。

【问题讨论】：

您的标记中只有一个 body 元素（我希望！），所以如果您将其设为不透明度 0.5，则 整个页面 将是 0.5 - 所以也可以相反，您想要制作除 nav .5 不透明度之外的所有元素吗？如果是这样，您可能正在寻找类似$('body > *:not(#navigation-mobile)').css('opacity': '.5');.... 或者，您真的希望使背景具有不透明度？
元素的不透明度适用于其所有内容，因此您的想法将不起作用
你有你的一般 HTML 结构的例子吗？有很多选择器选项可供您使用（虽然不是正文），但没有更多信息，没有人能给您准确的答案。

标签： jquery html css css-selectors

【解决方案1】：

不透明度影响应用元素的所有子元素。要绕过它，请将您的背景设置为没有子元素的自己的元素，并仅对背景应用不透明度。您可能必须在后台容器上使用类似的东西：

 position: fixed; top:0; left:0; z-index:1; width:100vw; height:100vh;

然后内容容器将通过也给它坐在顶部：

 position: fixed; top:0; left:0; z-index:10;

然后，您可以在不影响内容的情况下对背景应用不透明度。不要将背景应用于身体。创建一个单独的 div 并将其应用于该 div。

【讨论】：

我认为 OP 的意思是他们想要降低除导航之外的所有内容的不透明度。这可以在没有额外元素的情况下完成，只需更准确的选择器。一开始我也被这个措辞弄糊涂了。
除了新的背景元素不响应不透明度这一事实之外，这有效。如果我对内容容器进行不透明处理，它可以工作，但不适用于背景。

【解决方案2】：

如果没有 HTML 样本，就无法为您提供特定的解决方案，但 cmets 是正确的，将不透明度应用于 body 会影响其中的所有内容。

假设您的结构类似于以下内容：

<body>
  <header></header>
  <nav id="navigation-mobile"></nav>
  <main></main>
  <footer></footer>
</body>

你可以这样做：

$('body > *:not(#navigation-mobile)').css({'opacity': 0.5 })

您需要根据您的标记调整选择器，但一般的想法是您使用:not() 选择器将不透明度应用于移动导航的兄弟姐妹，然后将不透明度应用于他们的孩子。例如，如果您有一个包含所有内容的容器，则可以将选择器中的 body 替换为您的容器类/ID。

如果您使用相关的 HTML 编辑您的问题，我可以将我的答案编辑得更具体。

【讨论】：

【解决方案3】：

没有办法删除子元素[1]的不透明度

如果您将页面的其余部分（导航栏除外）改为一个元素会怎样。

像这样：

<body>
  <div id="navigation-mobile">
    <ul class="inline-list">
      <li><a href="#">link1</a></li>
      <li><a href="#">link2</a></li>
      <li><a href="#">link3</a></li>
    </ul>
  </div>
  <div id="body">
    <div id="header">blabla</div>
    <div id="content">blabla</div>
    <div id="footer">blabla</div>
  </div>
</body>

这样就只能使用这个jquery代码了：

$('#body').css({opacity: '0.5'});

导航栏将保持完全不透明。

【讨论】：