前端 CSS 经典：好用的 CSS 选择器

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;
}