不常用但必须得知道的CSS选择器

目录

1 :focus-within聚焦父元素

2 :has()选择器

3 ::selection鼠标选中的文字

---

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

只需要这样，就可以设置我们选中文本时的样式了