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