Question

我有以下简单示例，其中我通过CSS的转换指令（http://jsfiddle.net/rtubio/dmhqjhd3/）为给定div的位置设置动画：

<input type='checkbox' id='toggle' class='toggle' />
<label for='toggle'></label>

<div id='area' class='area'>
    <div id='area-title' class='area-title'></div>
</div>

...我有相关的CSS代码（参见JSFiddle），只要单击复选框的标签，它就会将div -50px的转换设置为页面底部。如果我将复选框+标签移动到我想要设置动画的div的内部：

<div id='area' class='area'>
    <div id='area-title' class='area-title'>
        <input type='checkbox' id='toggle' class='toggle' />
        <label for='toggle'></label>
    </div>
</div>

...动画停止工作（请参阅第二个JSFiddle，其中包含非工作示例：http://jsfiddle.net/rtubio/k5o0uggu/）。我一直在寻找可能的不兼容性，但我找不到。

CSS对此案件有任何限制吗？

Answer 1

是的，CSS有一个限制，兄弟组合器（+和~）只能跟随DOM元素的兄弟姐妹“看到”，即元素是给定元素的父元素的直接子元素稍后在源顺序中比这个元素。 CSS无法选择元素的祖先。因此，您必须在.area之前将复选框留在室外，以便可以通过复选框的.area状态控制:checked。

但是，由于您的复选框不可见且label无论其在DOM中的位置如何都会将点击转移给它，您只能在label内移动.area并分别修改您的选择器，例如< / p>

.toggle + div label {
    text-align: center;
    display: block;
    position: relative;
}

.toggle + div label:after {
    content: '(hide)'; 
}

.toggle:checked + div label:after {
    content: '(show)';
}

<强> See edited fiddle

Answer 2

你的问题是.toggle：checked~.area因为你已经将.toggle放在.area中它没有任何改变位置如果你在下面放置另一个div添加一个类并将css更改为

.toggle：checked~.newclass

一切都应该有效

由内部复选框触发的div上的CSS转换

2 个答案: