当复选框只使用css在相邻div中时，你能用一个复选框设置一个div吗？

Question

我一直在努力解决这个问题，我不知道如何让它发挥作用。我发现CSS非常令人沮丧，但可能是因为我是一个菜鸟。无论如何，我试图使用一个复选框来隐藏DIV，但我希望相邻div中的复选框，以便我可以用标签来设置它。

最终结果应该是带有复选框的年份标题（即2014年，2013年，2012年等）。单击该复选框后，将显示所有月份以及相应的复选框。单击该月的复选框时，将显示日期。

如果直接位于其上方，我可以使其工作，但是将输入和标签格式化为看起来很好的标题非常困难。

    <style type="text/css">

html
    {
        margin:0;
        padding:0;
    }

p
    {
        margin:0;
        padding:0;
    }

#container
    {
        width:900px;
        height:auto;
        background-color: #DDD;
        margin:0 auto;
    }

.header
    {
        width: 100%;
        height: 25px;
        outline: 1px solid #000;
        outline-offset: -1px;
    }

#year
    {
        width:800px;
        height: auto;
        background-color: #666;
        margin:0px auto;
    }

#month
    {
        width:750px;
        height: auto;
        background-color: #FFF;
        margin-left:50px;
    }

#day
    {
        width:700px;
        height: auto;
        background-color: #09F;
        margin-left:50px;
    }

#dayinfo
    {
        width:675px;
        height: auto;
        background-color:#0CF;
        margin-left:25px;
    }

.upper
{
    height:50px;
    width:800px;
    background-color:#F00;
}

.sub
{
    height:50px;
    width:800px;
    background-color:#0F3;
}

.clear
    {
        clear:both;
    }

input ~ .sub
    {
        display:none;
    }

input:checked ~ .sub
    {
        display: inline;
    }





    </style>


<div id="container">
<div id="containerheader" class="header"><p>Calandar</p></div>

    <div id="year" class="main">
    <!-- <div id="yearheader" class="header"></div> -->
    <input type="checkbox" id="yearbox"><label for="yearbox">Year</label>
            <div id="month" class="sub">
                <div id="monthheader" class="header"></div>
                <div id="day" class="sub">
                    <div id="dayheader" class="header"></div>
                    <div id="dayinfo">
                        <p>day info goes here</p>
                    </div>
                </div>
            </div>
    </div>


</div>

此代码有效，但您无法轻松设置样式。如果它可以用于内部，那将是非常棒的。

感谢。