1. focus-within

当前选中元素及当前选中元素的后代元素有没有聚焦。

.focus:focus-within {
  background: #fff;
}

2. has

span 的兄弟元素 input 有自定义属性 data-required 的设置样式

.label span:has(+ input[data-required])::after {
  content: '*',
  color: red
}

3. first-letter

文字首字母大写下沉

.content::first-letter {
  font-size: 4em;
  text-transform: uppercase;
  float: left;
  line-height: 1;
  margin-right: 10px;
}

4. selection

选中文字样式修改

.content::selection {
  background: #333;
  color: blue;
  text-decoration: underline;
}