css 新增的伪类选择器用法

<div class='form-block'>
    <lable class='lable'>
        <span>账户</span>
        <input required class='txt' type='text'/>
    </lable>
</div>r

 

1. .form-block:focus-withinfocus-within 表示自己被聚焦或者自己的后代元素被聚焦 通常用在input元素的父元素上

2.  .lable span:has(+input[required])::after { content: '*', color:'f00' }表示选择的span元素后面是否有兄弟元素带有一个 required 属性

3.  .content:first-letter {....} first-letter 表示对文本首个文字和字母设置单独样式

4.  .content::selection{ ... } selection  表示对鼠标选中的文本添加新样式