html - 当文本区域处于焦点时，如何让 div 出现？ (两者都是同一表单元素的子元素)

Question

我无法让我的 CSS 工作 :(

HTML

<form action="/api/submit/" method="post">
    <textarea name="post" rows="2"></textarea>
    <input type="url" name="url" />
    <div>
        <input type="radio" name="someName" value="someValue" />
    </div>
    <button type="submit">Submit</button>
</form>

CSS

form > input {
    display: none;
    position: absolute; top: -2.5em; left: 0;
}
form > textarea:focus + input {
    display: block;
}
form > div {
    display: none;
    position: absolute; top: 0; left: -6.66%;
}
form > textarea:focus + input + div {
    display: block;
}

我想要的是让 div 和 input 元素在 textarea 处于焦点时出现。目前，只有 input 元素在做它应该做的事情。

此外，如果我不在 textarea 上使用 :focus，我可以选择 div，这很奇怪。

Answer 1

你可以使用 css3

form > textarea:focus ~ div {
    display: block;
}

其中 ~ 是一般的前一个兄弟选择器 w3c css3 selector recommendation

演示:jsfiddle