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

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

jquery html css

使用Jquery将css应用于除一个元素之外的所有元素,jquery,html,css,css-selectors,Jquery,Html,Css,Css Selectors,我想使我的移动导航的背景透明度为0.5 我用的是： $('body:not(#navigation-mobile)').css({opacity: '0.5'}); 但是，当我希望除#navigation mobile之外的所有元素都能显示时，整个身体都会显示不透明度。不透明度会影响应用元素的所有子元素。要绕过它，请将背景设置为它自己的元素，不包含子元素，并仅对背景应用不透明度。您可能必须在后台容器中使用类似的内容： position: fixed; top:0; left:0; z-ind

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

我用的是：

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

但是，当我希望除

#navigation mobile

之外的所有元素都能显示时，整个身体都会显示不透明度。

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

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

然后，内容容器将通过以下方式位于顶部：

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

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

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

然后，内容容器将通过以下方式位于顶部：

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

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

如果没有HTML示例，就无法为您提供特定的解决方案，但是注释是正确的，将不透明性应用于

主体将影响其内部的所有内容
假设您的结构与以下类似：
<body>
  <header></header>
  <nav id="navigation-mobile"></nav>
  <main></main>
  <footer></footer>
</body>

您需要根据标记调整选择器，但一般的想法是使用：not（）
选择器将不透明度应用于移动导航的同级，然后将不透明度应用于其子级。例如，如果您有一个包装所有内容的容器，则可以用您的容器类/ID替换选择器中的body

如果你用相关的HTML编辑你的问题，我可以将我的答案编辑得更具体。
如果没有HTML示例，就无法为你提供具体的解决方案，但是注释是正确的，对正文
应用不透明性将影响其中的所有内容
假设您的结构与以下类似：
<body>
  <header></header>
  <nav id="navigation-mobile"></nav>
  <main></main>
  <footer></footer>
</body>

您需要根据标记调整选择器，但一般的想法是使用：not（）
选择器将不透明度应用于移动导航的同级，然后将不透明度应用于其子级。例如，如果您有一个包装所有内容的容器，则可以用您的容器类/ID替换选择器中的body

如果你用相关的HTML编辑你的问题，我可以编辑我的答案，使之更具体。
没有办法删除子元素的不透明度
那么，如果您将页面的其余部分（导航栏除外）设置为一个元素会怎么样呢
像这样：
<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>

导航栏将保持完全不透明度。
无法删除子元素的不透明度
那么，如果您将页面的其余部分（导航栏除外）设置为一个元素会怎么样呢
像这样：
<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>

导航栏将保持完全不透明度。
标记中只有一个body
元素（我希望！），因此如果您将其设置为不透明度。5，整个页面将保持.5-那么您是否希望设置除nav.5不透明度之外的所有元素？如果是这样，您可能正在寻找类似于$（'body>*：not（#navigation mobile'）.css（'opacity'：'.5'）。。。。或者，你真的想让背景具有不透明度吗？一个元素的不透明度适用于它的所有内容，所以你所想的不会起作用。你有一个通用HTML结构的例子吗？有很多选择器选项可供选择（但不是正文），但没有更多信息，没有人能给你准确的答案。标记中只有一个body
元素（我希望！），因此如果你将其设置为不透明。5，整个页面将是.5-那么你想让除nav.5不透明度之外的所有元素都不透明度吗？如果是这样，您可能正在寻找类似于$（'body>*：not（#navigation mobile'）.css（'opacity'：'.5'）。。。。或者，你真的想让背景具有不透明度吗？一个元素的不透明度适用于它的所有内容，所以你所想的不会起作用。你有一个通用HTML结构的例子吗？你可以使用很多选择选项（虽然不是正文），但是如果没有更多的信息，没有人能给你一个准确的答案。我想OP的意思是，除了导航，他们想降低所有东西的不透明度。这可能不需要额外的元素，只需要更精确的选择器即可完成。我一开始也被这些措辞弄糊涂了。除了新的背景元素不响应不透明性这一事实外，这是有效的。如果我对内容容器进行不透明度处理，它可以工作，但对背景不起作用。这可能不需要额外的元素，只需要更精确的选择器即可完成。我一开始也被这些措辞弄糊涂了。除了新的背景元素不响应不透明性这一事实外，这是有效的。如果我对内容容器进行不透明度处理，它可以工作，但对背景不起作用。