我已经使用以下HTML创建了一个复选框:

<div class="chkbox">
  <input id="accept-filter" type="checkbox" class="filter-handler" checked=""> 
  <label for="accept-filter">
   ::before
   <span class="label-txt">I accept the terms</span>
  </label>
</div>

我想设置::before伪元素的样式,但只有在选中复选框时才会这样做.

我已经使用:has Select 器成功地做到了这一点:

.chkbox:has(.filter-handler:checked) label::before

然而,这在Firefox(it seems the :has selector isn't supported)中不起作用.

我希望有一种方法可以通过使用+sibling Select 器来实现这一点,但以下方法似乎不起作用(jsfiddle):

.filter-handler:checked + label::before

有办法做到这一点吗?

推荐答案

你使用的方法将会奏效.您可以使用‘+’ Select 器来执行此操作.

它使用类名和标记名,如下所示:

.filter-handler:checked + .filter-label::bef或e

.filter-handler:checked + label::bef或e

找到以下代码

.filter-handler:checked + .filter-label::bef或e {
  content: 'Selected';
  display: inline-block;
  background-col或: blue;
  col或: '#fff';
}
<div class="chkbox">
  <input id="accept-filter" type="checkbox" class="filter-handler" checked=""> 
  <label f或="accept-filter" class="filter-label">
   <span class="label-txt">I accept the terms</span>
  </label>
</div>

Html相关问答推荐

一次悬停可触发同一分区中的另一次悬停

使用Scrapy Select 最后一个子文本

R中的动态Webscraping

在浮动元素旁边垂直居中

浏览器是在调整大小还是在全屏上交换视频源?

Div内容防止同级大小增加

如何收集<;p&>元素下的<;p>;子元素

Flexbox在元素之间造成了太大的差距

高度:适合-内容不拉伸以适合内部长度

Chrome浏览器错误:上的主题验证判断https://pagead2.googlesyndication.com/失败

如何制作';在第';页中搜索;是否发现多个元素中的单词?

四开:如何右对齐 PDF *和* HTML 中的文本

CSS 字母间距将按钮向右扩展

如何将背景与之前的内容正确对齐

a with