冷门但好用的CSS选择器

冷门但好用的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;
  }
相关推荐
一洽客服系统10 分钟前
网页嵌入与接入功能说明
开发语言·前端·javascript
DoraBigHead24 分钟前
this 的前世今生:谁在叫我,我听谁的
前端·javascript·面试
蓝婷儿1 小时前
每天一个前端小知识 Day 28 - Web Workers / 多线程模型在前端中的应用实践
前端
琹箐1 小时前
Ant ASpin自定义 indicator 报错
前端·javascript·typescript
小小小小小惠1 小时前
Responsetype blob会把接口接收的二进制文件转换成blob格式
前端·javascript
爱电摇的小码农1 小时前
【深度探究系列(5)】:前端开发打怪升级指南:从踩坑到封神的解决方案手册
前端·javascript·css·vue.js·node.js·html5·xss
kymjs张涛2 小时前
零一开源|前沿技术周报 #7
android·前端·ios
爱编程的喵2 小时前
React入门实战:从静态渲染到动态状态管理
前端·javascript
Tttian6222 小时前
npm init vue@latestnpm error code ETIMEDOUT
前端·vue.js·npm
患得患失9492 小时前
【前端】【组件库开发】【原理】【无框架开发】现代网页弹窗开发指南:从基础到优化
前端