CSSが分からない
とんでもないレベルの初心者です。CSSに強い方お助けくださいませ。
発生している問題
radioで要素を表示・非表示にしたいのですが、消えたまま表示されません。
該当のソースコード
html
1<main> 2 <p>A - Z</p> 3 <br> 4 <input id="font_all" type="radio" name="font" value="checked"> 5 <input id="font_serif" type="radio" name="font"> 6 <input id="font_san-serif" type="radio" name="font"> 7 <input id="font_script" type="radio" name="font"> 8 <input id="font_handwriting" type="radio" name="font"> 9 <input id="font_monospace" type="radio" name="font"> 10 <input id="font_slab" type="radio" name="font"> 11 <input id="font_other" type="radio" name="font"> 12 <p class="align-left"> 13 <label for="font_all">all</label> 14 <label for="font_serif">serif</label> 15 <label for="font_san-serif">san-serif</label> 16 <label for="font_script">script</label> 17 <label for="font_handwriting">handwriting</label> 18 <label for="font_monospace">monospace</label> 19 <label for="font_slab">slab</label> 20 <label for="font_other">other</label> 21 </p> 22 23 <section> 24 <ul class="font-ul"> 25 <a href=""><li data-font="serif" class="serif-averia"> 26 <span>Averia Serif Libre</span><br> 27 <p>The quick brown fox jumps over the lazy dog</p> 28 </li></a> 29 <a href=""><li data-font="san-serif"> 30 <span>Open Sans</span> 31 <p>The quick brown fox jumps over the lazy dog</p> 32 </li></a> 33 <li></li> 34 </ul> 35 </section> 36 </main>
css
1ul.font-ul > a > li { 2 display: none; 3} 4 5#font_all:checked ~ .font-ul > a > li, 6#font_serif:checked ~ .font-ul > a > li[data-font*="serif"], 7#font_san-serif:checked ~ .font-ul > a > li[data-font*="san-serif"], 8#font_script:checked ~ .font-ul > a > li[data-font*="script"], 9#font_handwriting:checked ~ .font-ul > a > li[data-font*="handwriting"], 10#font_monospace:checked ~ .font-ul > a > li[data-font*="monospace"], 11#font_slab:checked ~ .font-ul > a > li[data-font*="slab"], 12#font_other:checked ~ .font-ul > a > li[data-font*="other"] { 13 display: inline-block !important; 14} 15 16ul.font-ul li { 17 display:inline-block; 18 position: relative; 19 width: 230px; 20 height: auto; 21 padding: 7px; 22 margin: 5px; 23 border: solid 1px rgba(255, 255, 255, .3); 24 border-radius: 5px; 25 font-size: 10px; 26 color: #fff; 27 background: rgba(255, 255, 255, 0.125); 28}
試したこと
ディベロッパーで見てもよく分かりませんでした。
補足情報(ツールのバージョンなど)
chrome最新版
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/03/20 14:41