html - 有人可以告诉我CSS3中#id:checked〜section {}的含义吗

我正在尝试从“ codepen”的引用创建动画菜单，但是我不明白下面编写的代码是否有人可以帮助我，这是我第一次看到这样的代码，它看起来像选择器，但无法帮助它理解
HTML：

    <div id="wrapper">
        <div class="mobile">
            <!-- Checkbox to tonggle the menu -->
            <input type="checkbox" id="tm"/>

            <ul class="sidenav">
                <li><a href="#"><i class="fa fa-apple"></i></a></li>
                <li><a href="#"><i class="fa fa-windows"></i></a></li>
                <li><a href="#"><i class="fa fa-android"></i></a></li>
                <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
                <li><a href="#"><i class="fa fa-tumblr"></i></a></li>
                <li><a href="#"><i class="fa fa-github"></i></a></li>
                <li><a href="#"><i class="fa fa-youtube-play"></i></a></li>
                <li><a href="#"><i class="fa fa-dropbox"></i></a></li>
                <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                <li><a href="#"><i class="fa fa-vimeo"></i></a></li>
                <li><a href="#"><i class="fa fa-skype"></i></a></li>
            </ul>

            <!-- Content area -->
            <section>
                <!-- Label for #tm checkbox -->
                <label for="tm">Menu</label>
            </section>

最佳答案

 #ID:checked~section{

 }

这意味着在特定的ID内，如果选中此复选框，则其节（兄弟姐妹）必须具有以下属性

tilde（〜）是通用的同级组合器

有关更多信息，请检查此link