CSS逻辑组合伪类_代码007(未授权)

本文介绍: CSS 的逻辑组合伪类有 4 种，分别是：:no t()、:i s()、:where()和:ha s()。

CSS 的逻辑组合伪类有 4 种，分别是：:no t()、:i s()、:where()和:ha s()。

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

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

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

.div-a &gt; img,
.div-b &gt; 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 标签的优先级。

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

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。