如何仅通过CSS为关联必填input元素的label添加星号？

当然可以仅用CSS搞定这两个需求！不过得结合DOM结构来针对性处理，下面给你详细拆解：

场景1：label的for属性关联到带required的input元素 #

首先要明确一个CSS的限制：目前CSS没有反向选择器，没法直接通过label的for值反向找到对应的input元素。所以我们只能处理「input在label之前，且二者同层级」的情况（CSS只能从前往后选择元素）。

针对这种情况，我们可以用兄弟选择器~来匹配所有和带required属性的input同层级、且通过for关联的label：

/* 匹配同层级下，关联到带required属性input的label（input在前） */
input[required] ~ label[for]::after {
  content: '*';
  color: #ff4444;
  margin-left: 0.25em; /* 给星号和label文本留点间距，更美观 */
}

对应的DOM示例：

<div>
  <input id="email" type="email" required />
  <span>请填写常用邮箱</span> <!-- 中间可以插其他元素 -->
  <label for="email">邮箱...</label>
</div>

场景2：label直接紧跟在带required属性的input之后 #

这个场景就简单多了，用相邻兄弟选择器+就能精准匹配紧跟在input后的label，你给出的写法已经很对，我补全点细节：

/* 匹配紧跟在带required属性input后的label */
input[required] + label::after {
  content: '*';
  color: #ff4444;
  margin-left: 0.25em;
}

对应的DOM示例：

<div>
  <input type="text" required />
  <label>姓名...</label>
</div>

完整测试代码 #

把两种场景放一起的完整示例：

<form>
  <!-- 场景2示例 -->
  <div>
    <input type="text" required />
    <label>姓名...</label>
  </div>

  <!-- 场景1示例 -->
  <div>
    <input id="email" type="email" required />
    <span>请填写常用邮箱</span>
    <label for="email">邮箱...</label>
  </div>
</form>

<style>
input[required] + label::after,
input[required] ~ label[for]::after {
  content: '*';
  color: #ff4444;
  margin-left: 0.25em;
}
</style>

小提醒：如果你的需求是label在input之前（比如label先显示，input在后面），那纯CSS暂时没法实现，这时候可能需要调整DOM结构，或者用JS辅助处理。

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