目录
1 :focus-within聚焦父元素
一起来看下面的一个例子
这是html的元素结构：
<div class="form">
<label>
<span>账号</span>
<input required type="text" class="text">
</label>
</div>
<div class="form">
<label>
<span>密码</span>
<input required type="password" class="text">
</label>
</div>
<div class="form">
<label>
<span>邮箱</span>
<input type="text" class="text">
</label>
</div>
<button>提交</button>我们现在想实现一种功能，就是当鼠标聚焦文本框的时候，他的父元素背景颜色能发生变化
就像下面这样：
正常情况下我们能想到的那肯定是：focus伪类来实现聚焦后的一些操作，但是注意我们这里被聚焦的是文本框，但是我们要进行处理的是它的父元素，父元素是一个盒子 它是不能被聚焦的，那么我们该怎么办的，我们可以使用js来实现这个功能，那样固然可以但是不够优雅，我们可以使用:focus-within选择器来实现此功能，像这样：
.form:focus-within {
background-color: #409eff30;
}是不是更加优雅了呢，这样我们就可以在文本框聚焦的时候对它的父元素进行一些操作了
2 :has()选择器
也是以上面的案例来做解析
一般情况下的表单提交（像那种在注册时要疯狂填写一堆的信息的表单）我们都有必选项和可选项，这时候我们可以做一个这样的效果
正常情况下我们就使用::after伪类选择器来操作就行了，像这样：
.form span::after {
content: "*";
color: red;
}但是有没有发现一个问题，我们没有对它的是否为必选项做一些限制。
这时候我们可以用一个非常简单的选择器来进行操作，那就是:has(),看代码
.form span:has(+ input[required])::after {
content: "*";
color: red;
}这段代码的意思就是在input框中找“required”这个项，并选中它，只需要在input中加上required就可以表示它是必选的，
<input required type="password" class="text">
效果就实现了，而且后期维护起来也是非常的简单方便，只要增删required即可
3 ::selection鼠标选中的文字
正常情况下我们鼠标选中的文字样式是下面这样的：
我们现在想改变它的样式该怎么做呢，很简单：
.t::selection {
background-color: #666;
color: #fff;
text-decoration: underline;
}只需要这样，就可以设置我们选中文本时的样式了
