使用相邻选择器(+)为checked状态input对应的::after设置CSS样式

错误原因 #

你的两种写法都不生效是因为相邻兄弟选择器+的匹配逻辑不符合你的DOM结构：

• 第一种写法的input:checked+ ::after试图匹配input后面的同级节点的伪元素，但你的input是.container的唯一子节点，不存在可匹配的同级元素
• 第二种写法的input:checked+.container试图匹配input后面的class为container的同级元素，同样不存在对应节点

可行解决方案 #

方案1：兼容旧浏览器（无父元素样式修改逻辑，符合你的要求） #

仅需调整HTML结构，将input与label改为同级，通过for属性关联即可，无需使用特殊CSS特性：

HTML代码

<input type="checkbox" id="check">
<label class="container" for="check"></label>

CSS代码

.container::after {
  content: 'A';
  color: red;
}

input:checked + .container::after {
  color: blue;
}

/* 你原有的container样式可保留 */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

方案2：无需修改原有HTML结构 #

使用CSS :has()伪类实现，兼容Chrome 105+、Firefox 121+、Safari 15.4+，覆盖全球95%以上用户：

CSS代码

.container::after {
  content: 'A';
  color: red;
}

.container:has(> input:checked)::after {
  color: blue;
}

内容的提问来源于stack exchange，提问作者MRNafisiA