冷门但好用的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;
  }
相关推荐
汪子熙9 分钟前
走进 Fundamental NGX Platform:从 SAP 设计体系到高生产力组件层
前端·javascript·面试
拉不动的猪23 分钟前
单点登录全流程小姐
前端·javascript·面试
菜鸟小九30 分钟前
html、css(javaweb第一天)
前端·css·html
y东施效颦1 小时前
uni-app页面发布测试环境出现连接服务器超时,点击屏幕重试解决方案
前端·javascript·vue.js·uni-app·vue
大熊程序猿1 小时前
《开篇:课程目录》
前端·c#
摸鱼仙人~2 小时前
React中子传父组件通信操作指南
前端·javascript·react.js
程序员阿超的博客2 小时前
React事件处理:如何给按钮绑定onClick点击事件?
前端·javascript·react.js
沉香亭北2 小时前
vue+vite 全局主题
前端
郑州小张2 小时前
前端解析PDF文件目录以及点击目录实现对应内容预览
前端·javascript
海底火旺3 小时前
探索扣子:解锁中间技能模块的无限可能
前端·人工智能·coze