标签+输入相邻CSS选择器不起作用

Question

我可以使p + p相邻选择器正常工作，但不能使label + input正常工作。为什么会这样？

p+p {
  color: red;
  /* Works fine! */
}

label+input {
    background-color: red;
  /* Doesn't work */
}

<p>Test</p>
<p>Test</p>
<br>
<label>Test</label><input type='checkbox'>

https://jsfiddle.net/h16engzw/

Answer 1

否，实际上它正在运行，但是您没有使用正确的属性

label+input {
    background-color: red;
  /* Doesn't work */
} 

在此代码中，您尝试将background-color: red;赋予checkbox，但不能将background-color赋予复选框。 例如，如果您尝试这样做：

input {
        background-color: red;
    } 

这也行不通。

您使用的是正确的选择器，但复选框的属性错误，例如，尝试此操作。

label+input {
        height:70px;
    } 

现在复选框的高度将改变。 我希望你明白我的意思。 请随时询问是否。