css之选择器、无需改变html结构的自定义校验标识符星号、输入框聚焦修改父元素样式、设置已选择的文字样式、首字符下沉、focus-within、first-letter、selection、has

要实现不改变HTML结构的前提下，为输入框添加自定义的星号标识并在输入框聚焦时修改父元素的样式，可以使用CSS属性选择器和相邻兄弟选择器。以下是实现这一功能的CSS代码示例：

/* 当输入框的前一个兄弟元素是带有特定类的星号时，并且当前输入框处于聚焦状态时，修改其父元素的样式 */
.input-container > input:focus + .required-marker:before,
.input-container > input:valid + .required-marker:before {
  /* 这里添加你希望在聚焦时应用的样式 */
  color: red; /* 仅作为样式示例 */
}
 
/* 星号标记的样式 */
.required-marker:before {
  content: "*";
  color: grey; /* 默认颜色 */
  margin-left: 4px; /* 示例间隔 */
}

HTML结构示例：

<div class="input-container">
  <input type="text" required>
  <span class="required-marker"></span> <!-- 星号标识 -->
</div>

在这个例子中，.input-container 是父元素，其内包含一个输入框和一个带有 .required-marker 类的span元素，用于显示星号。当输入框聚焦或者输入内容合法时，通过CSS伪元素 ::before 添加的星号会改变颜色，表示其所属的输入框为必填项。这个例子不改变HTML结构，并且可以通过CSS实现视觉效果，不需要额外的JavaScript代码。