无法为Label元素的子元素设置样式问题排查求助

问题根因 #

• 第一条样式规则选择器书写错误：你HTML里的外层容器是id="container"，对应的CSS选择器需要用#container input，你写的.container input是匹配类名为container的元素，自然找不到目标元素，样式不生效。
• 第二条样式规则.test input选择器是正确的，但<input type="checkbox">属于浏览器原生替换元素，默认不支持内边距（padding）属性的渲染，所以你写的padding-right不会生效。
• 如果你要实现的是复选框和左侧文字的间距，应该用margin-right而非padding-right：padding是元素内部的间距，margin才是元素和相邻同级元素之间的外部间距。

修正方案 #

调整后的CSS代码 #

#container {
  display: flex;
  flex-direction: column;
}

#container div {
  display: flex;
}

.test {
  display: flex;
  height: 4rem;
  align-items: center;
  padding-left: 2rem;
  /* flex布局下直接加gap控制子元素间距更简单，不需要单独给input加margin */
  gap: 3rem;
}

/* 选择器修正为id选择器 */
#container input {
  margin-right: 3rem;
}

.test input {
  margin-right: 3rem;
}

/* 如果要做完全自定义的复选框，可以隐藏原生input，用下面的.checkmark span绘制自定义样式 */
.test input {
  position: absolute;
  opacity: 0;
}
.checkmark {
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

HTML代码无需修改，和你原有代码一致即可 #

<section id="container">
    <div>
        <label class="test">Expand Sidebar To Show Text                     
            <input type="checkbox">
            <span class="checkmark"></span>
        </label>
    </div>
</section>

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