为什么除非分配了一个类，否则之前的伪选择器不能正常工作？答案

【问题标题】：Why is the before pseudo-selector not working properly unless a class is assigned?为什么除非分配了一个类，否则之前的伪选择器不能正常工作？
【发布时间】：2018-10-31 19:39:04
【问题描述】：

HTML

<label>
  <Input type="checkbox"/>
  <span class="check-label">Remember me</span>
</label>

CSS

input[type="checkbox"] + .check-label:before {
  content: "before";
}

所以当我使用一个类时，这个 css 可以按预期工作，但是当我做这样的事情时：

input[type="checkbox"] + label > span:before {
  content: "before";
}

之前的内容没有出现。除非必须，否则我不喜欢使用一堆类和 ID，那么为什么在这种特殊情况下我不得不这样做呢？

【问题讨论】：

input[type="checkbox"] + label 在复选框之后直接要求一个标签，这不是你所拥有的。也许你的意思是label > input[type="checkbox"] + span:before。另外，课程也不错。
那么 CSS 看到 + label 而不是 + label.... 会发生什么？所以我必须使用一个类来解决这个问题？
没有。 a + b 的意思是“找到一个紧跟在其兄弟a 之后的b”。你的 <label> 和 <input> 是父母和孩子，而不是兄弟姐妹。
但是label > span 不是<input> 的兄弟吗？
没有优先级，只是从左到右（或从右到左）。 a + b > c 表示 c 是 b 的子代，a 之后。

标签： html css pseudo-element

【解决方案1】：

我同意 isherwood 的观点，但我认为您真正想要的是：

input[type="checkbox"] + span:before {
  content: "before";
}

【讨论】：