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。因此，元素必须是兄弟姐妹才能被选中。

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

Example Here

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

您已将选择器缩小到#composite-field元素。在组合器~之后，您只需指定要尝试选择的同级元素。您试图选择一个兄弟html元素，然后选择其中的input[type=submit]元素。由于它不是input[type=email]的兄弟，所以没有选择。

CSS选择器〜不工作

1 个答案: