CSS 选择器 ~ 不工作

Question

我有一个按钮，我想在有人关注输入字段时更改 css。

html body form div#composite-field input[type=email]:focus ~ html body form div#composite-field input[type=submit] {
    color: #ffffff;
    background-color: #2e4e67;
}

HTML:

<form method='post' class="animate" autocomplete="off">
    <div id="composite-field">
        <input type='email' class='animate' value='' placeholder='Е-mail Адреса'>

        <input type='submit' class='animate' value='>'>
    </div>
</form>

据我在网上查询，我的选择器设置正确。但由于某种原因，它不起作用。

我会很感激另一双眼睛来帮助识别问题？谢谢

Answer 1

~ is a general sibling combinator。因此，元素必须是兄弟姐妹才能被 selected.

根据您提供的 HTML，使用以下内容：

Example Here

form div#composite-field input[type=email]:focus ~ input[type=submit] {
    color: #ffffff;
    background-color: #2e4e67;
}

您已经将 select 或缩小到 #composite-field 元素。在组合子 ~ 之后，您只需指定要尝试 select 的兄弟元素。您试图 select 一个兄弟 html 元素，然后 select 其中的 input[type=submit] 元素。由于它不是 input[type=email] 的兄弟姐妹，因此没有 selected。

CSS 选择器 ~ 不工作

CSS selector ~ not working

css

css-selectors