CSS 的逻辑组合伪类有 4 种,分别是::not()、:is()、:where()和:has()。
否定伪类:not()
否定伪类,是在元素与括号里面的参数不匹配的时候,就会对这个伪类进行匹配。比如::not(span):{color:red}
,这就会匹配不是 span 元素的其他所有元素,包括 html 和 body。
- :not()的优先级是 0,因为它的优先级是由括号里面的参数来定的;
- :not()伪类可以同时判断多个选择器,比如
input:not(:disabled):not(:read-only) {}
,表示匹配不属于禁用状态同时也不处于只读状态的 input 元素; - not()支持多个表达式,比如:
.cs-li:not(li, dd) {}
,还有另外一种写法:.cs-li:not(li):not(dd) {}
。但是这两种写法,要考虑兼容性问题; - :not()也支持选择符,比如:
input:not(.a > .b) { border: red solid; }
;
: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(.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 经常遇到的几个逻辑伪类。
原文地址:https://blog.csdn.net/xuelian3015/article/details/134679650
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_27400.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。