冷门但好用的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;
  }
相关推荐
昔人'21 分钟前
`list-style-type: decimal-leading-zero;`在有序列表`<ol></ol>` 中将零添加到一位数前面
前端·javascript·html
岁月宁静6 小时前
深度定制:在 Vue 3.5 应用中集成流式 AI 写作助手的实践
前端·vue.js·人工智能
心易行者6 小时前
10天!前端用coze,后端用Trae IDE+Claude Code从0开始构建到平台上线
前端
saadiya~7 小时前
ECharts 实时数据平滑更新实践(含 WebSocket 模拟)
前端·javascript·echarts
fruge7 小时前
前端三驾马车(HTML/CSS/JS)核心概念深度解析
前端·css·html
百锦再7 小时前
Vue Scoped样式混淆问题详解与解决方案
java·前端·javascript·数据库·vue.js·学习·.net
烛阴7 小时前
Lua 模块的完整入门指南
前端·lua
浪里行舟8 小时前
国产OCR双雄对决?PaddleOCR-VL与DeepSeek-OCR全面解析
前端·后端
znhy@1238 小时前
CSS易忘属性
前端·css
瓜瓜怪兽亚8 小时前
前端基础知识---Ajax
前端·javascript·ajax