四个你可能不知道的CSS选择器

focus-within

.parent:focus-within {
  background: #333;
}

当 .parent元素或其子元素处于focus状态时的样式。

has()

<div class="form-item">
  <span>姓名</span>
  <input data-required type="text" />
</div>
<style>
.form-item span:has(+ input[data-required])::after {
  content: '*';
  color: red;
}
</style>

has()筛选额外属性，+筛选兄弟元素。

first-letter

.span::first-letter {
  font-size: 4rem;
  text-transform: upercase;
}

选择 .span文本中的首个字母。

selection

.content::selection {
  background: #000;
  color: #fff;
}

选择 .content的文本处于被选择状态的部分。