html - JS なしで ID リンク CSS を使用して 2 つの Div を表示する - オーバーレイとコンテンツ

Question

css を使用して、href リンクを含む div を表示しようとしています。これまでのところ、次のマークアップは単純です。

<div id="container">
    <div id="row1">
        <a href="#content"><div id="box1"></div></a>

        <div id="box2"></div>
    </div>

「box1」（背景画像へのリンク）をクリックすると、「コンテンツ」IDのdivが表示されます。「コンテンツ」div は、id="overlay" を持つ別の div 内にあります。

リンクをクリックして、オーバーレイ div とコンテンツ div の両方を表示したいと思います。私はjavascriptを使いたくありません。:target を使用して、1 つの div (たとえば、"content" div または "overlay" div) を問題なく表示できます。

「オーバーレイ」および「コンテンツ」div のマークアップ:

<div id="overlay">
    <a href="#close">
        <div class="content">
            <strong class="closebutton" title="Close Content">X</strong>
                <h1>Awesome DIV Layer Technique</h1>
                <hr>
                <p>Content Goes Here</p>
        </div>
    </a>
</div>

現時点での私の親relative CSS：

#content{
display: none;
width: 460px;
padding: 20px;
background: #fff;
color: #000;
margin: 0 auto;
text-align: left;
cursor: auto;
position: relative;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

#overlay{
display: none;
position: absolute;
background: rgb(0,0,0);
background: rgba(0,0,0,0.7);
width: 100%;
height: 100%;
padding: 0;
top: 0;
left: 0;
z-index: 1;
opacity: 0.9;
color: #FFFFFF;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, 
sans-serif;
}

#overlay:target{
display: table-cell;
vertical-align: middle;
text-align: center;
}

#close #overlay:target{
display: none;
}

クラスセレクターを使用してそれらを組み合わせることで、考えられるあらゆる方法でCSSを微調整しようとしましたが、これを実行する正しい方法を理解できないようです。「#overlay div{」を使用できることはわかっていますが、これを複数のリンクとコンテンツ div で使用するので、相互に div を指定できるようにする必要があります。

前もって感謝します。