javascript - 如何在没有javascript的情况下通过点击他的 child 来更改父元素的CSS属性

Question

我想通过点击他的子元素来改变一些父元素的样式没有javaScript。 例如:点击.button 或.text-container 必须改变他的父背景颜色(.right-side/。左侧).

<div class="main-container">  
    <div class="table parent-size">
        <div class="table-cell parent-half-width left-side">
            <div class="table parent-size">   
                <div class="table-cell vertical-align-middle to-right-inline text-container">
                    Left side text      
                </div>
                <div class="table-cell vertical-align-middle to-center-inline">
                    <span class="button"></span>
                </div>      
            </div>        
        </div>
        <div class="table-cell parent-half-width right-side active">
            <div class="table parent-size">
                <div class="table-cell vertical-align-middle to-center-inline">
                    <span class="button active"></span>
                </div>      
                <div class="table-cell vertical-align-middle to-left-inline text-container">
                    Right side text
                </div> 
            </div>
        </div>
    </div>
</div>

.main-container {
    width: 600px;
    height: 60px;
    color: #fff;
    font-size: 14px;
}
.left-side, .right-side {
    background: #212121;
}
.right-side.active {
    background: #E3A215;
}
.left-side.active {
    background: #5D7FE6;
}
.button {
    width: 16px;
    height: 16px;
    display: inline-block;
    cursor: pointer;
    border: 3px solid #cfcfcf;
}

See Fiddle

Answer 1

我通过为该元素使用带有 label 的隐藏 input type="checkbox" 解决了这个问题。输入位于目标父 block (“.left-side”)上方，标签位于.left-side block 内。单击标签切换输入条件。在 css 中，我使用 css3 伪类 "checked"。

在我的例子中，我有两个必须切换的按钮。 事件按钮具有另一种背景颜色和另一种 .button View ，这就是我使用 input type="radio" 的原因。

也许这对某些人有用。解决方案只需要几行 css 和一些额外的 html 标签。

<div class="main-container">

    <div class="table parent-size">

        <input id="answer-left" class="css-checkbox" name="votingButton" type="radio" />
        <div class="table-cell parent-half-width left-side answer-wrapper">
            <div class="table parent-size">   
                <div class="table-cell vertical-align-middle to-right-inline">
                    <label for="answer-left" class="answer">
                        <div class="table-cell vertical-align-middle to-right-inline text-container">
                            Left side text      
                        </div>
                        <div class="table-cell vertical-align-middle to-center-inline button-wrap">
                            <span class="button">&nbsp;</span>
                        </div> 
                    </label>
                </div>
            </div>        
        </div>
        ...
    </div>
</div> 

.css-checkbox {
     display: none;
}
.css-checkbox:checked + .answer-wrapper.left-side {
    background: #E3A215;
}
.css-checkbox:checked + .answer-wrapper.right-side {
    background: #5D7FE6;
}
.css-checkbox:checked + .answer-wrapper .button {
    width: 22px;
    height: 22px;
    background: url(http://goo.gl/Yw9qN1) no-repeat;
    border: none;
}

See Fiddle