CSS逻辑组合伪类

CSS 的逻辑组合伪类有 4 种,分别是::not()、:is()、:where()和:has()。

否定伪类:not()

否定伪类,是在元素与括号里面的参数不匹配的时候,就会对这个伪类进行匹配。比如::not(span):{color:red},这就会匹配不是 span 元素的其他所有元素,包括 html 和 body。

否定伪类:not()的几个特点:

  1. :not()的优先级是 0,因为它的优先级是由括号里面的参数来定的;
  2. :not()伪类可以同时判断多个选择器,比如input:not(:disabled):not(:read-only) {}​​,表示匹配不属于禁用状态同时也不处于只读状态的 input 元素;
  3. not()支持多个表达式,比如:.cs-li:not(li, dd) {}​​,还有另外一种写法:.cs-li:not(li):not(dd) {}​​。但是这两种写法,要考虑兼容性问题;
  4. :not()也支持选择符,比如:input:not(.a > .b) { border: red solid; }​​;

:is()

:is()伪类,是把括号里面的选择都分配出去。语法如下:

:is(article) p {}
:is(article, section) p {}
:is(.article[class], section) p {}
.some-class:is(article:not([id]), section) p {}​​

is 这个伪类最大的作用,就是在简化选择器。比如我们要设置多个 div 内的图片样式,样式代码如下:

.div-a > img,
.div-b > img,
.div-c > img,
.div-d > img {
   display: block;
   width: 100%; height: 100%;
   border-radius: 50%;
}​​

通过 is 伪类来简化一下:

:is(.div-a,.div-b,.div-c,.div-d)>img{
   display: block;
   width: 100%; height: 100%;
   border-radius: 50%;
}

:where()伪类的功能和 is 是一样的,只是它的优先级一直都是 0,会忽略括号内参数的优先级。比如::where(.article, section) p {}​​的优先级就是 p 标签的优先级。

关联伪类:has()

has()伪类,就是匹配某个选择器。例如:a:has(span) { color:red }​​,a 元素内的 span 标签的字体颜色设置为 red。

这就是 CSS 经常遇到的几个逻辑伪类。

相关推荐
拼图20923 分钟前
Vue.js开发基础——数据绑定/响应式数据绑定
前端·javascript·vue.js
刘志辉28 分钟前
vue反向代理配置及宝塔配置
前端·javascript·vue.js
星叔1 小时前
ARXML汽车可扩展标记性语言规范讲解
java·前端·汽车
编程老船长1 小时前
第18章 从零开始:春节门联网页设计,用DIV+CSS打造传统与现代的完美融合
前端·css·html
sky.fly1 小时前
HTML5+css3(浮动,浮动的相关属性,float,解决浮动的塌陷问题,clear,overflow,给父亲盒子加高度,伪元素)
前端·css·html
Coisini_甜柚か1 小时前
打字机效果显示
前端·vue3·antv
郑小憨2 小时前
Node.js NPM以及REPL(交互式解释器) 使用介绍(基础介绍 二)
开发语言·前端·javascript·npm·node.js
嚣张农民2 小时前
在 WebSocket 连接中出现错误时,如何处理和捕获错误?
前端·javascript·面试
代码搬运媛2 小时前
前端开发利器:npm 软链接
前端·npm·node.js
周三有雨2 小时前
vue3 + vite 实现版本更新检查(检测到版本更新时提醒用户刷新页面)
前端·vue.js·typescript