Question

我一直试图解决这个问题几个小时，这让我很生气，所以我希望有人能够解决我的问题。

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

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;
}

基本上，当你点击黄色厕纸时，我希望.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

css选择器问题：选中复选框时，父div的背景不同

1 个答案: