非表示のdivとターゲット

Question

は私のhtmlでこれを持っているときにそれを示しています

<div> 
    <ul id="tabs"> 
    <li id="h1"> 
     <a href="#h1">Home</a> 
     <div> 
     text here 
     </div> 
    </li> 
    <li id="h2"> 
     <a href="#h2">Services</a> 
     <div> 
     text here 
     </div> 
    </li> 
    </ul> 
</div> 

私がやりたいことは、その内容を隠しながら、リスト項目をインラインで行うことです。そして、コンテンツはリストアイテムのリンクを押すと表示されます。これは私が今までCSSで試したことです：

li { 
    display: inline; 
} 

li div { 
    display: none; 
} 

li:target { 
    display: block; 
} 

しかし、これはうまくいきません。 display：ブロック;ディスプレイをオーバーライドしていません。

ありがとうございます！

Answer 1

li:targetは、ターゲットであるli要素自体を指します。そのliのdisplayプロパティをblockに設定すると、divを含むdisplayのプロパティは、noneに設定されます。実際にはliに定義されているdisplay: inlineを上書きします。

li要素内にdivを表示する場合は、実際にそのdivと一致するようにセレクタを調整する必要があります。元のルールの特異性と一致するようにli:target divを使用して、例えば：target`：

li { 
 
    display: inline; 
 
} 
 

 
li div { 
 
    display: none; 
 
} 
 

 
li:target div { 
 
    display: block; 
 
}

<div> 
 
    <ul id="tabs"> 
 
    <li id="h1"> 
 
     <a href="#h1">Home</a> 
 
     <div> 
 
     text here 
 
     </div> 
 
    </li> 
 
    <li id="h2"> 
 
     <a href="#h2">Services</a> 
 
     <div> 
 
     text here 2 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</div>