html - 应用 :target to HTML elements with different ID

Question

我有一个叠加层，它会在页面打开时显示可关闭的消息。

目前内容在后台加载，使我的页面可以滚动。在我测试过的浏览器 opera mini 上，内容显示在后台。我认为它不支持透明度。

无论如何，我决定将内容隐藏在背景中，直到消息消失，而不是用透明层覆盖内容:

这是我剥离的 CSS:

#Overlay { 
     width: 500px;   max-width:85%;
     margin:0 auto;     
     position:relative;     
     z-index:10;    
     display:block;     
     background-color:#363b59; }

#Overlay:target { display:none;}

#content { display:none;}

我的HTML

<div id="Overlay">
     <p>overlay content</p>
     <a href="#Overlay">cancel</a>
</div> 

<div id="content">
     <p>content goes here</p>
</div> 

所以，我的问题是:是否可以使用我用来隐藏叠加层以显示内容的相同 #Overlay:target。还是有更好的方法？

Answer 1

如果您的 div 是兄弟，您可以使用通用兄弟选择器 ~。引用:https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors

片段:

#Overlay { 
     width: 500px;   max-width:85%;
     margin:0 auto;     
     position:relative;     
     z-index:10;    
     display:block;     
     background-color:#363b59; 
}
#Overlay, #Overlay a { color: #fff; }
#Overlay:target { display:none;}

#Overlay ~ #content { display:none;}
#Overlay:target ~ #content { display:block;}

<div id="Overlay">
     <p>overlay content</p>
     <a href="#Overlay">cancel</a>
</div> 

<div id="content">
     <p>content goes here</p>
</div>