CSS 2 Attribute Selectors怎么样？它在浏览器之间非常兼容。
示例：

label[required=required] {
   color: blue;
}

<label required="required" for="one">Label:</label><input name="one" id="one" />

同时检查this。

可以使用label[for="title"]，其中“title”是输入的ID。例如：

<label for="title">Title</label>
<input type="text" id="title" name="title">

CSS：

label[for="title"] {
  color: blue;
}

此解决方案适用于大多数现代浏览器：

label > input[required="required"] {
    background: red; 
}

<label for="myField"><input required="required" id="myField" /></label>

我不认为这可以通过CSS以OP想要的方式实现。CSS就是不能那样工作。
在我看来，一个更好的方法是退一步看全局。您有一个表单，其中一些字段是必填字段，一些不是。首先为用户提供所有必填字段，或者将必填字段组合在一起，并将它们与可选字段明确分开，这是一个好方法。
您可以创建如下结构

<form>
     <ul class="required_fields">
       <li>
          <label>username</label>
          <input />
       </li>
       <li>
          <label>email</label>
          <input />
       </li>
     </ul
     <ul class="optional_fields">
          ...
     </ul>
 </form>

/* CSS */
.required_fields label {font-weight: bold} 
.required_fields label:after { content: "*"; color: red } /*more styles for labels*/

此方法有许多优点。您可以轻松地在“必需”组中添加和删除项，而不必单独修改每个项。您可以根据需要将“必需”类分配到链中的任意位置。如果表单具有“必需”类，则其中的所有内容都将标记为必需。需要进行更改的位置更少。如果你决定把“required”类命名为其他名称。一般来说，这种方法也可以帮助你更好地组织表单。你不应该把必填字段和可选字段混在一起。
您可以更进一步，使用一些javascript将所需的属性也注入到输入字段中。

$(".required_fields input").each(function(){
   this.setAttribute('required', 'required');
});

好吧，这是不可能的CSS（因为我尝试），你可以很容易地做到这一点在JS：

let l = document.querySelectorAll('input[required]')
l.forEach(e => {
  e ? e.parentElement.classList.add('required-input') : null;
})

x一个一个一个一个x一个一个二个一个x一个一个三个一个