冷门但好用的CSS选择器

css选择器大家在开发中一定频繁的用到过，绝大多数情况我们使用最频繁的往往就是元素选择器，类选择器，ID选择器，后代选择器。但是随着页面复杂程度的提高，用我们之前使用的那些常用的选择器可能就不那么方便了，接下来分享几个大家之前可能从未使用，但是非常好用的选择器。

相邻选择器

相邻选择器用于选择紧接在另一个元素后面的直接相邻兄弟元素的选择器，使用加号（+）作为组合符号，将两个选择器连接起来。它选择的是位于第一个选择器后紧邻的同级元素。

css 复制代码

.item1+div {
    background-color: pink;
  }

通用兄弟选择器

通用兄弟选择器使用波浪号来选择，除自己之外所有同级的兄弟元素。

css 复制代码

.item4~div {
    background-color: pink;
  }

猫头鹰选择器(相邻兄弟选择器)

猫头鹰选择器可选择紧接在另一元素后的元素，且二者有相同父元素。可以用来在一个容器内的元素之间添加间距，但不包括第一个元素,实现起来更加的优雅。

css 复制代码

.box2>div+div {
    background-color: pink;
    margin-top: 20px;
}

属性选择器

属性选择器用于选择具有特定属性的元素。有很多种用法，下面列举几个常用的实例。

使用[attribute]来选择所有具有 attribute 属性的元素

xml 复制代码

<div class="box">
    <div data-text="1">attribute1</div>
    <div data-text="2">attribute2</div>
    <div data-text="index3">attribute3</div>
  </div>


<style>
 [data-text] {
    background-color: pink;
  }
</style>

使用 [attribute=value] 来选择具有指定属性及属性值的元素

css 复制代码

 [data-text="2"] {
    background-color: greenyellow;
  }

使用 [attribute*=value] 来选择具有指定属性，并且该属性的值中包含该值的元素

css 复制代码

 [data-text*="index"] {
    background-color: red;
  }

使用 [attribute^=value] 来选择具有指定属性，并且该属性的值以给定值开头的元素。可以用来分辨不同的链接

css 复制代码

a\[href^="http"] {
background-color: green;
}

a\[href^="#"] {
background-color: orange;
}

使用 [attribute$=value] 来选择具有指定属性，并且该属性的值以给定值结尾的元素。

css 复制代码

a[href$=".jpg"] {
    background-color: slateblue;
  }

  a[href$=".png"] {
    background-color: fuchsia;
  }

:not() 伪类

使用 :not() 伪类可以选择不符合指定选择器或条件的元素。这在需要排除某些特定元素时非常有用。

css 复制代码

 .box3>div:not(.notTest) {
    background-color: #388fbb;
  }

浏览器兼容性

:has() 伪类

使用 :has() 伪类可以选择包含某个特定元素或选择器的父级元素，并为其应用样式。

xml 复制代码

 <div class="box3">
    <div class="item">item</div>
    <div class="notTest">not</div>
    <div class="hasTest"><span>has</span></div>
</div>

<style>
  .box3>div:has(span) {
    background-color: red;
  }
</style>

浏览器兼容性

::selection 伪元素

::selection 伪元素用于选择并自定义修改用户所选文本的样式。可以应用于包含文本内容的任何元素，如段落、标题、按钮等。可以强化选中的视觉效果。

css 复制代码

  p::selection {
    background-color: gold;
    color: blue;
    font-weight: bold;
  }