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

【问题标题】：Label + Input Adjacent CSS Selector not working标签 + 输入相邻 CSS 选择器不起作用
【发布时间】：2019-03-21 07:30:57
【问题描述】：

我可以让 p+p 相邻选择器工作，但不能让标签 + 输入。为什么会这样？

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'>

【问题讨论】：

您要更改复选标记的颜色吗？
对不起，我的意思是放背景颜色。举个例子。
见*.com/questions/7398462/…和*.com/questions/34388696/…
label+input 正在正常工作。我们不能将背景颜色应用于输入复选框。所以尝试设置width..jsfiddle.net/nimittshah/vuwLyqs7

【解决方案1】：

不，实际上它正在工作，但您没有使用正确的属性

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

在此代码中，您试图将background-color: red; 提供给checkbox，但您不能将background-color 提供给复选框。例如，如果你想试试这个：

input {
        background-color: red;
    }

这也行不通。

您使用的是正确的选择器，但复选框的属性错误，例如试试这个。

label+input {
        height:70px;
    }

现在复选框的高度会改变。我希望你明白我的意思。如果没有，请随时询问。

【讨论】：