当我添加一个复选框标签的类时，CSS停止工作[重复]

Posted 2023-03-06

【中文标题】当我添加一个复选框标签的类时，CSS停止工作[重复]

【英文标题】：Css stops working when I add a class of a checkbox's label [duplicate]

【发布时间】：2019-02-04 15:10:58

【问题描述】：

真的很抱歉，我知道这是一个非常基本的问题。

代码工作正常，除非我尝试将属性应用于另一个对象，在本例中为标签。 “c”类。我不明白为什么这样一个基本的东西不起作用。

html：

 <button type="button" id="boton" disabled>hi</button>
 <input type="checkbox" id="checky"/>
 <label class="c" id="checkyl" for="checky">etiquette</label>

CSS：

#boton:disabled:hover + .c 
  font-weight: bold;

【问题讨论】：

后面不是“+”吗？ （元素之间有输入）

【参考方案1】：

.c1 + .c2 
  /* styles here  */

上面的选择器选择了 c2 类的元素，它紧跟在 .c1 类的元素之后

.c1 ~ .c2 
  /* styles here  */

此选择器选择具有类 c2 的元素，如果具有类 .c1 的元素是同级元素

在您的情况下，您需要使用兄弟（~）选择器而不是相邻兄弟（+）选择器

#boton:disabled:hover~.c 
  font-weight: bold;

【参考方案2】：

您可能正在寻找通用兄弟选择器~

#boton:disabled:hover~.c 
  font-weight: bold;

<button type="button" id="boton" disabled>hi</button>
<input type="checkbox" id="checky" />
<label class="c" id="checkyl" for="checky">etiquette</label>

相邻兄弟选择器+ 在这种情况下将不起作用，因为.c 不会直接出现在#boton 之后

【讨论】：

我认为 + 用于特定元素，而 ~ 用于正在使用的元素中的元素。谢谢你，你真是太好了。

没问题。你应该在这里看看一个有趣的基于 CSS 选择器的小游戏flukeout.github.io/#