关注多个元素及其属性

Question

给定以下HTML和CSS代码：

input[type=text] {
  background-color: red;
}
input[type=text]:focus {
  background-color: white;
}
button[type=submit] {
  background-color: blue;
}
button[type=submit]:focus {
  background-color: green;
}

<form method="get" id="searchform" action="index.php">
  <input type="text" placeholder="Search..." name="s" id="s" value="" autocomplete="off">
  <button class="search-button" type="submit">
    <span class="icon-search2"></span>
    </button>
</form>

当我专注于输入[类型=文本]时，如何激活"按钮[类型=提交]：焦点"？我试图做这样的事情：

input[type=text]:focus {
    background-color: white;
}
button[type=submit]:focus {
    background-color: green;
}

但它不起作用...知道吗？提前感谢！

Answer 1

如果没有预处理器，就无法像这样嵌套 CSS。

您想要的是当输入聚焦时选择下一个按钮元素。您可以使用 ~ 选择器：

input[type=text] {
  background-color: red;
}
input[type=text]:focus {
  background-color: white;
}
button[type=submit] {
  background-color: blue;
}
button[type=submit]:focus,
input[type=text]:focus~button[type=submit] {
  background-color: green;
}

<form method="get" id="searchform" action="index.php">
  <input type="text" placeholder="Search..." name="s" id="s" value="" autocomplete="off">
  <button class="search-button" type="submit">
      <span class="icon-search2">Click me</span>
    </button>
</form>

Answer 2

很简单：你不能。您一次只能关注一个元素。

源