【CSS】Radioで要素が表示されない

Question

CSSが分からない

とんでもないレベルの初心者です。CSSに強い方お助けくださいませ。

発生している問題

radioで要素を表示・非表示にしたいのですが、消えたまま表示されません。

該当のソースコード

<main>
            <p>A - Z</p>
            <br>
            <input id="font_all" type="radio" name="font" value="checked">
            <input id="font_serif" type="radio" name="font">
            <input id="font_san-serif" type="radio" name="font">
            <input id="font_script" type="radio" name="font">
            <input id="font_handwriting" type="radio" name="font">
            <input id="font_monospace" type="radio" name="font">
            <input id="font_slab" type="radio" name="font">
            <input id="font_other" type="radio" name="font">
            <p class="align-left">
                <label for="font_all">all</label>
                <label for="font_serif">serif</label>
                <label for="font_san-serif">san-serif</label>
                <label for="font_script">script</label>
                <label for="font_handwriting">handwriting</label>
                <label for="font_monospace">monospace</label>
                <label for="font_slab">slab</label>
                <label for="font_other">other</label>
            </p>
            
            <section>
                <ul class="font-ul">
                    <a href=""><li data-font="serif" class="serif-averia">
                        <span>Averia Serif Libre</span><br>
                        <p>The quick brown fox jumps over the lazy dog</p>
                    </li></a>
                    <a href=""><li data-font="san-serif">
                        <span>Open Sans</span>
                        <p>The quick brown fox jumps over the lazy dog</p>
                    </li></a>
                    <li></li>
                </ul>
            </section>
        </main>

ul.font-ul > a > li {
   display: none;
}

#font_all:checked ~ .font-ul > a > li,
#font_serif:checked ~ .font-ul > a > li[data-font*="serif"],
#font_san-serif:checked ~ .font-ul > a > li[data-font*="san-serif"],
#font_script:checked ~ .font-ul > a > li[data-font*="script"],
#font_handwriting:checked ~ .font-ul > a > li[data-font*="handwriting"],
#font_monospace:checked ~ .font-ul > a > li[data-font*="monospace"],
#font_slab:checked ~ .font-ul > a > li[data-font*="slab"],
#font_other:checked ~ .font-ul > a > li[data-font*="other"] {
    display: inline-block !important;
}

ul.font-ul li {
    display:inline-block;
    position: relative;
    width: 230px;
    height: auto;
    padding: 7px;
    margin: 5px;
    border: solid 1px rgba(255, 255, 255, .3);
    border-radius: 5px;
    font-size: 10px;
    color: #fff;
    background: rgba(255, 255, 255, 0.125);
}

試したこと

ディベロッパーで見てもよく分かりませんでした。

補足情報（ツールのバージョンなど）

chrome最新版

Answer 1

2つ、原因があるようでした。

1つはセレクタに「section」が抜けていること、
変更前: #font_all:checked ~ .font-ul > a > li,
変更後: #font_all:checked ~ section .font-ul > a > li,

もう1つは文字色や背景色がない (白?) ため要素が表示されていても視認できないことです。

#font_all:checked ~ section .font-ul > a > li,
#font_serif:checked ~ section .font-ul > a > li[data-font*="serif"],
#font_san-serif:checked ~ section .font-ul > a > li[data-font*="san-serif"],
#font_script:checked ~ section .font-ul > a > li[data-font*="script"],
#font_handwriting:checked ~ section .font-ul > a > li[data-font*="handwriting"],
#font_monospace:checked ~ section .font-ul > a > li[data-font*="monospace"],
#font_slab:checked ~ section .font-ul > a > li[data-font*="slab"],
#font_other:checked ~ section .font-ul > a > li[data-font*="other"] {
    display: inline-block !important;
    
    color: #f00; /* 文字色を指定 */
}

別件ですが
ulの子要素はliにして、その中にaを含めたほうがHTML的には正しいので、
余裕あれば見直すことをおすすめします。

Comments

[erp]

やってみたら出来ました！
検証と回答、ありがとうございます！！！

手直しもしてみます。