HTMLマークアップ内でCSS 'target'セレクタをインラインで使用するには？

Question

divでコンテンツを表示/非表示にするには、CSSをクリックしてください。 私は以下のコードでこれを達成できますが、私がする必要があるのは、CSSの 'ターゲット'セレクターをインラインに配置することです。助けていただければ幸いです。 THX

<style> 
.openDiv {display: none;} 
.openDiv:target {display: block;} 
</style> 
<ul> 
<li><a href="#Expando1">The Tick</a> 
<ul class="openDiv" id="Expando1"> 
<li>Has superhuman strength and mass;</li> 
<li>Is nigh-invulnerable; </li> 
<li>Has powers that increase as the situation becomes more dramatic;</li> 
<li>Does not seem to require oxygen;</li> 
<li>Cannot keep his balance if his antennae are removed.</li> 
</ul>  
</li> 
</ul> 

Answer 1

あなたは...セレクタインライン ...スタイルだけすることはできませんすることはできません。あなたは考え直す必要があります。おそらく "チェックボックスのハック"？

input[type="checkbox"] { 
 
    position: absolute; 
 
    display: none; 
 
} 
 
input[type="checkbox"] ~ ul { 
 
    display: none; 
 
} 
 
input[type="checkbox"]:checked ~ ul { 
 
    display: block; 
 
}

<ul> 
 
    <li> 
 
    <input type="checkbox" class="expando" id="expando" /> 
 
    <label for="expando">The Tick</label> 
 
    <ul class="openDiv" id="openDiv1"> 
 
     <li>Has superhuman strength and mass;</li> 
 
     <li>Is nigh-invulnerable;</li> 
 
     <li>Has powers that increase as the situation becomes more dramatic;</li> 
 
     <li>Does not seem to require oxygen;</li> 
 
     <li>Cannot keep his balance if his antennae are removed.</li> 
 
    </ul> 
 
    </li> 
 
</ul>