使用jQuery为除#navigation-mobile外元素设置透明度0.5时出现异常，求解决方案

嘿，这个问题我之前也踩过坑！你用$('body:not(#navigation-mobile)').css({opacity: '0.5'})之所以会让整个body都变透明，核心原因是**opacity属性是会被子元素继承的**——你这里的选择器其实是选中了body元素本身（body肯定不是#navigation-mobile这个id），给body设置透明度后，它下面的所有子元素包括#navigation-mobile都会跟着继承这个半透明效果，自然达不到你想要的“排除导航”的目的。

给你几个可行的解决方案：

• 方案1：给非导航内容单独套容器
  最稳妥的方式是调整HTML结构，把除了#navigation-mobile之外的所有内容放到一个单独的容器里，比如：

  <body>
    <div class="main-content">
      <!-- 这里放所有非导航的内容 -->
    </div>
    <div id="navigation-mobile">
      <!-- 移动端导航内容 -->
    </div>
  </body>
  

  然后直接给这个容器设置透明度：

  $('.main-content').css({opacity: 0.5});
  

  这种方式最直观，也不会有继承问题，导航完全不受影响。

• 方案2：选中body的直接子元素并排除导航
  如果不想改HTML结构，可以直接选中body下的所有直接子元素，排除#navigation-mobile，然后给这些子元素设置opacity：

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

  注意这里用了>选择器来限定直接子元素，这样只会给body的直接子节点设置半透明，#navigation-mobile作为独立的直接子元素不会被选中，也就不会变透明。

• 方案3：用rgba模拟半透明（仅适用于背景）
  如果你的需求只是让背景变半透明，而内容保持不透明，可以用rgba背景色代替opacity：

  $('body').css({backgroundColor: 'rgba(255,255,255,0.5)'}); // 这里的rgba值根据你的需求调整
  

  这种方式不会影响子元素的透明度，但只对背景有效，要是需要内容也半透明就不适用了。

内容的提问来源于stack exchange，提问作者Liam Smith