以 div 为目标时如何将 CSS 应用于页面包装器答案

【问题标题】：How to apply CSS to page wrapper when div is targeted以 div 为目标时如何将 CSS 应用于页面包装器
【发布时间】：2014-03-03 06:58:21
【问题描述】：

我正在构建一个灯箱，当单击 <a href="#lightbox"> 并使用 :target 属性时，它会弹出一个名为 #lightbox 的 div。因此，当您单击该链接时，使框可见的 CSS 将是 #lightbox:target {display: block}。当灯箱是 :target 时，我希望将 CSS 属性应用于 #page_wrap id，但我认为我遗漏了一些东西，因为我的解决方案不起作用。

我想在#lightbox:target 时将以下CSS 应用于#page_wrap：

overflow: hidden

我当前的 CSS 不起作用。

#lightbox:target + #page_wrap {overflow: hidden}

这是我的codepen.

【问题讨论】：

标签： javascript html css css-selectors target

【解决方案1】：

这个 jQuery 代码应该适合你：

$("#lightbox").click( function(){ $("#page_wrap").css("overflow","hidden"); } );

把它放在你的标题中：

<script>
jQuery(document).ready(function($){

$("#lightbox").click( function(){ $("#page_wrap").css("overflow","hidden"); } );

});
</script>

如果你不调用jQuery的话还需要：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

在上述脚本上方的标题中。

【讨论】：

javascript 是这里唯一的解决方案吗？纯 CSS 解决方案怎么样？
不确定纯 css...jquery 在当今的编程中如此流行，我发现它更容易，因为它打开了很多门
@MattBeckman 我正要发布答案，但被击败了。 Javascript 是真正做到这一点的唯一方法。当任何元素不是具有伪类的元素时（如 :hover 或 :target），CSS3 选择器不够健壮，无法定位任何元素。如果您要选择的元素与#lightbox 有某种关联（例如直接子#lightbox:target > .child），那么您可以使用纯CSS。
stackoverflow.com/a/797343/756329 CSS 选择器无法提升。该死。
@jmh010 此代码不起作用。为了让overflow:hidden 应用于#page_wrap，您必须打开灯箱，然后单击 div。我需要在单击<a href="#lightbox"> 时应用 CSS 的代码，而不是在单击实际 div 本身时应用 CSS。