html - css 选择器问题 : different background to parent div when checkbox is checked

Question

几个小时以来，我一直在努力解决这个问题，这让我抓狂，所以我希望有人能够阐明我的问题。

我正在尝试定义一个 CSS 选择器；我想在选中特定复选框(仅限#test1)时更改 DIV (.first) 的背景颜色。

我的例子在这里: http://jsfiddle.net/Zg6Vf/1/

HTML:

<div class="container">


        <div class="first">
        <input id="test1" name="accordion" type="checkbox" />
        <label for="test1">
    <img src="http://designmodo.github.io/Flat-UI/images/icons/svg/toilet-paper.svg" class="hide1"><img src="http://designmodo.github.io/Flat-UI/images/icons/svg/mail.svg" class="hide2"></label>
        <article class="content">
            <p>Spring onion parsley squash lotus root gumbo swiss chard spinach amaranth scallion collard greens coriander brussels sprout caulie leek ricebean. Dandelion lotus root plantain mung bean spring onion radish soko fennel cucumber komatsuna. Shallot bell pepper broccoli welsh onion kohlrabi kale celery corn fava bean epazote.</p>
        </article>
        </div>


                <div class="first">
        <input id="test2" name="accordion" type="checkbox" />
        <label for="test2">
    <img src="http://designmodo.github.io/Flat-UI/images/icons/svg/retina.svg" class="hide1"><img src="http://designmodo.github.io/Flat-UI/images/icons/svg/clocks.svg" class="hide2"></label>
        <article class="content">
            <p>Spring onion parsley squash lotus root gumbo swiss chard spinach amaranth scallion collard greens coriander brussels sprout caulie leek ricebean. Dandelion lotus root plantain mung bean spring onion radish soko fennel cucumber komatsuna. Shallot bell pepper broccoli welsh onion kohlrabi kale celery corn fava bean epazote.</p>
        </article>
        </div>


            </div>

CSS:

.container{
    width: auto;
    height: auto;
    margin: 0 auto;
    font-family:Georgia;
    font-size: 1em;
    line-height: 1.5em;
    display: block;
    color: black;
}
.container label{
    position: relative;
    display: block;
    cursor: pointer;
    margin: 10px;
    float: none;
    width: auto;
}
.container input{
    display: none;
}
.container article{
    overflow: hidden;
    height: 0px;
    position: relative;
}
.container input:checked ~ article.content{
    height: auto; 
}
input[type='checkbox']:checked + label > .hide1 {
    display: none !important;
}
input[type='checkbox']:checked + label > .hide2 {
    display: block !important;
}
.hide2 {
    display: none !important;
}

基本上，当您单击 Yellow Toiletpaper 时，我希望 .first div 具有黄色背景，但前提是选中#test1 复选框。我应该如何用 CSS 选择这个？？？？？

希望有人能帮忙:)

干杯。

Answer 1

CSS 中没有父选择器。您可以做的是使用兄弟选择器并为 article.content

设置黄色背景

.container input#test1:checked ~ article.content{
    background-color: yellow;
}

参见修改后的 JSFiddle

如果不介意图片和文字之间的白色缝隙，也可以加上

.container input#test1:checked + label {
    background-color: yellow;
}

JSFiddle

更新:

如果你可以使用 jQuery，你可以使用

$('#test1').change(function() {
    $('#test1:checked').parent().css('background-color', 'yellow');
});

参见 JSFiddle