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