wordpress 开发网站,自建国际网站做电商,推广赚钱项目话术,策划书范文案例CSS 的逻辑组合伪类有 4 种#xff0c;分别是#xff1a;:not()、:is()、:where()和#xff1a;has()。
否定伪类:not()
:not 伪类选择器用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中#xff0c;它也被称为反选伪类#xff08;negation pseudo-…CSS 的逻辑组合伪类有 4 种分别是:not()、:is()、:where()和has()。
否定伪类:not()
:not 伪类选择器用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中它也被称为反选伪类negation pseudo-class。
也叫否定伪类是在元素与括号里面的参数不匹配的时候就会对这个伪类进行匹配。比如
:not(span):{color:red}这就会匹配不是 span 元素的其他所有元素包括 html 和 body。
否定伪类:not()的几个特点
: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; };
有趣的是在 MDN 介绍 :not 的页面有这样一个例子
/* Selects any element that is NOT a paragraph 选择任何非段落的元素 */
:not(p) {color: blue;
}意思是:not(p) 可以选择任何不是 p标签的元素。然而上面的 CSS 选择器在如下的 HTML 结构实测的结果不太对劲。
pp/p
divdiv/div
spanspan/span
h1h1/h1结果如下
结果:not(p) 仍然可以选中 p 元素。尝试了多个浏览器得到的效果都是一致的。
这是为什么呢这是由于 :not(p) 同样能够选中 body那么 body 的 color 即变成了 blue由于 color 是一个可继承属性p 标签继承了 body 的 color 属性导致看到的 p 也是蓝色。
我们把它改成一个不可继承的属性试试看
/* Selects any element that is NOT a paragraph */
:not(p) {border: 1px solid;
}再看下效果 OK这次 p 标签没有边框体现没有问题实际使用的时候需要注意这一层继承的问题
:not 的优先级问题
下面是一些使用 :not 需要注意的问题。
:not、:is、:where 这几个伪类不像其它伪类它不会增加选择器的优先级。它的优先级即为它参数选择器的优先级。
并且在 CSS Selectors Level 3:not() 内只支持单个选择器而从 CSS Selectors Level 4 开始:not() 内部支持多个选择器像是这样
/* CSS Selectors Level 3:not 内部如果有多个值需要分开 */
p:not(:first-of-type):not(.special) {
}
/* CSS Selectors Level 4 支持使用逗号分隔*/
p:not(:first-of-type, .special) {
}与 :is() 类似:not() 选择器本身不会影响选择器的优先级它的优先级是由它的选择器列表中优先级最高的选择器决定的。
:not() 实战解析
来一个特别的例子
在 W3 CSS selectors-4 规范 中新增了一个非常有意思的 :focus-visible 伪类。
:focus-visible 这个选择器可以有效地根据用户的输入方式(鼠标 vs 键盘)展示不同形式的焦点。
有了这个伪类就可以做到当用户使用鼠标操作可聚焦元素时不展示 :focus 样式或者让其表现较弱而当用户使用键盘操作焦点时利用 :focus-visible让可获焦元素获得一个较强的表现样式。
看个简单的 Demo
buttonTest 1/button
buttonTest 2/button
buttonTest 3/buttonstyle
button:active {background: #eee;
}
button:focus {outline: 2px solid red;
}
/style鼠标点击效果 可以看到使用鼠标点击的时候触发了元素的 :active 伪类也触发了 :focus伪类不太美观。
但是如果设置了 outline: none 又会使键盘用户的体验非常糟糕。因为当键盘用户使用 Tab 尝试切换焦点的时候会因为 outline: none 而无所适从。
因此可以使用 :focus-visible 伪类改造一下
button:active {background: #eee;
}
button:focus {outline: 2px solid red;
}
button:focus:not(:focus-visible) {outline: none;
}看看效果分别是在鼠标点击 Button 和使用键盘控制焦点点击 Button 可以看到使用鼠标点击不会触发 :foucs只有当键盘操作聚焦元素使用 Tab 切换焦点时outline: 2px solid red 这段代码才会生效。
这样我们就既保证了正常用户的点击体验也保证了无法使用鼠标的用户的焦点管理体验在可访问性方面下了功夫。
值得注意的是这里为什么使用了 button:focus:not(:focus-visible)这么绕的写法而不是直接这样写
button:focus {outline: unset;
}
button:focus-visible {outline: 2px solid red;
}解释一下button:focus:not(:focus-visible) 的意思是button 元素触发 focus 状态并且不是通过 focus-visible 触发理解过来就是在支持 :focus-visible 的浏览器通过鼠标激活 :focus 的 button 元素这种情况下不需要设置 outline。
为的是兼容不支持 :focus-visible 的浏览器当 :focus-visible 不兼容时还是需要有 :focus 伪类的存在。
因此这里借助 :not() 伪类巧妙的实现了一个实用效果的方案降级。
这里有点绕需要好好理解理解。
:not 兼容性
除去 IE 系列:not 的兼容性已经非常之好了
任意匹配伪类:is()
:is()伪类是把括号里面的选择都分配出去。语法如下
: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%;
}单个选择器可以包含任意数量的:is()伪类。
例如下面的复杂选择器将绿色文本颜色应用于所有h1、h2和p元素这些元素是具有section或.primary类的.secondary的子元素并且不是article的第一个子元素
article section.primary:not(:first-child) h1,
article section.primary:not(:first-child) h2,
article section.primary:not(:first-child) p,
article section.secondary:not(:first-child) h1,
article section.secondary:not(:first-child) h2,
article section.secondary:not(:first-child) p {color: green;
}用is可以写为
article section:not(:first-child):is(.primary, .secondary) :is(h1, h2, p) {color: green;
}支持多层层叠连用
原本的 CSS 代码如下
dividiv i/i/div
pip i/i/p
divspandiv span/span/div
pspanp span/span/p
h1spanh1 span/span/h1
h1ih1 i/i/h1如果要将上述 HTML 中div 和 p 下的 span 和 i 的 color 设置为 red正常的 CSS 可能是这样
div span,
div i,
p span,
p i {color: red;
}有了 :is() 后代码可以简化为
:is(div, p) :is(span, i) {color: red;
}当然这个例子比较简单看不出 :is() 的威力。下面这个例子就比较明显这么一大段 CSS 选择器代码
ol ol ul, ol ul ul, ol menu ul, ol dir ul,
ol ol menu, ol ul menu, ol menu menu, ol dir menu,
ol ol dir, ol ul dir, ol menu dir, ol dir dir,
ul ol ul, ul ul ul, ul menu ul, ul dir ul,
ul ol menu, ul ul menu, ul menu menu, ul dir menu,
ul ol dir, ul ul dir, ul menu dir, ul dir dir,
menu ol ul, menu ul ul, menu menu ul, menu dir ul,
menu ol menu, menu ul menu, menu menu menu, menu dir menu,
menu ol dir, menu ul dir, menu menu dir, menu dir dir,
dir ol ul, dir ul ul, dir menu ul, dir dir ul,
dir ol menu, dir ul menu, dir menu menu, dir dir menu,
dir ol dir, dir ul dir, dir menu dir, dir dir dir {list-style-type: square;
}可以利用 :is() 优化为
:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) :is(ul, menu, dir) {list-style-type: square;
}不支持伪元素
注意:is()不能匹配::before和::after伪元素。
不能写成
div p:is(::before, ::after) {content: ;//...
}:where()伪类
:where()伪类的功能和 is 是一样的只是它的优先级一直都是 0会忽略括号内参数的优先级。比如
:where(.article, section) p {}优先级就是 p 标签的优先级。
:where()的零特异性对于CSS重置可能是实用的当没有特定的样式可用时CSS重置应用标准样式的基线。通常重置会应用默认字体、颜色、填充和边距。
例如
/* reset */
:where(h2) {margin-block-start: 1em;
}:where(article :first-child) {margin-block-start: 0;
}你现在可以覆盖任何CSS重置样式而不管它的特殊性也不需要更多的选择器或!important
h2 {margin-block-start: 2em;
}:is 和 :where 的区别
首先从语法上:is 和 :where 是一模一样的。它们的核心区别点在于 优先级。
来看这样一个例子
divpwhere is test/p
/divcss
:is(div) p {color: red;
}
:where(div) p {color: green;
}正常按我们的理解而言:is(div) p 和 :where(div) p 都可以转化为 div p由于 :where(div) p 后定义所以文字的颜色应该是 green 绿色但是实际的颜色表现为 color: red 红色
这是因为:where() 和 :is() 的不同之处在于:where() 的优先级总是为 0 但是 :is() 的优先级是由它的选择器列表中优先级最高的选择器决定的。
组合、嵌套
CSS 选择器的一个非常大的特点就在于组合嵌套。:is 和 :where 也不例外因此它们也可以互相组合嵌套使用下述的 CSS 选择器都是合理的
/* 组合*/
:is(h1,h2) :where(.test-a, .test-b) {text-transform: uppercase;
}
/* 嵌套*/
.title:where(h1, h2, :is(.header, .footer)) {font-weight: bold;
}简单总结下:is 和 :where 都是非常好的分组逻辑选择器唯一的区别在于:where() 的优先级总是为 0而:is() 的优先级是由它的选择器列表中优先级最高的选择器决定的。
关联伪类:has()
:has() 伪类接受一个选择器组作为参数该参数相对于该元素的 :scope 至少匹配一个元素。就是匹配某个选择器。例如
a:has(span) { color:red
}a 元素内的 span 标签的字体颜色设置为 red。
例如下面的CSS用于为任何包含一个或多个a或img标签的section链接添加一个蓝色的两像素边框
a:has(img, section) {border: 2px solid blue;
}例如
divpdiv -- p/p
/div
divp classg-test-hasdiv -- p.has/p
/div
divpdiv -- p/p
/divstyle
div:has(.g-test-has) {border: 1px solid #000;
}
/style注意这里选择的不是 :has() 内包裹的选择器选中的元素而是使用 :has() 伪类的宿主元素。
效果如下
可以看到由于第二个 div 下存在 class 为 .g-test-has 的元素因此第二个 div 被加上了 border。
:has()的引入允许了过去没有JavaScript就不可能实现的可能性。例如当任何必需的内部字段无效时您可以设置外部表单和以下提交按钮的样式
/* 当任何所需的内部字段无效时显示红色边框 */
fieldset:has(:required:invalid) {border: 3px solid red;
}
/* 当无效时更改提交按钮样式 */
fieldset:has(:required:invalid) button[typesubmit] {opacity: 0.2;cursor: not-allowed;
}此示例添加包含子菜单项列表的导航链接子菜单指示符
nav li:has(ol, ul) a::after {display: inlne-block;content: ;
}或者可以添加调试风格比如突出显示所有的
元素而不带内部的img figure:not(:has(img)) {border: 3px solid red;
}:has() 父选择器 – 嵌套结构的父元素选择
:has() 内还可以写的更为复杂一点。例如
divspandiv span/span
/div
divullih2spandiv ul li h2 span/span/h2/li/ul
/div
divh2spandiv h2 span/span/h2
/divstyle
div:has(h2span) {margin-left: 24px;border: 1px solid #000;
}
/style这里要求准确选择 div 下直接子元素是 h2且 h2 下直接子元素有 span 的 div 元素。注意选择的最上层使用 :has() 的父元素 div。结果如下 这里体现的是嵌套结构精确寻找对应的父元素。
还有一种情况在之前也比较难处理同级结构的兄元素选择。
例如
div classhas-testdiv p/div
pp/pdiv classhas-testdiv h1/div
h1h1/h1div classhas-testdiv h2/div
h2h2/h2div classhas-testdiv ul/div
ulul/ul我们想找到兄弟层级关系中后面接了 h2 元素的 .has-test 元素就是.has-test 元素的前一个可以这样写
.has-test:has( h2) {margin-left: 24px;border: 1px solid #000;
}效果如下
这里体现的是兄弟结构精确寻找对应的前置兄元素。
这样一直以来CSS 没有实现的父选择器借由 :has() 开始也能够做到了。这个选择器能够极大程度的提升开发体验解决之前需要比较多 JavaScript 代码才能够完成的事。
例如在鼠标hover到一个项时其前后两项也会变化
关键代码
li:has(li:hover), /* 选中被hover的li的前一个li即当一个元素后面紧跟一个被hover的li时选中它 */
li:hover li { /* 选中被hover的li的后一个li这个是大家都知道的 */font-size: 1.5em;width: 40px;height: 40px;
}还可以根据子元素的数量使用不同的布局 关键代码
/* 意思是当ul中第二个子元素也是最后一个子元素时选中ul里面的所有li让它们的宽度为75即半宽。
四个子元素时也做同样处理
*/
ul:has(li:nth-child(2):last-child) li,
ul:has(li:nth-child(4):last-child) li {width: 75px;height: 75px;
}ul:has(li:nth-child(8):last-child) li {width: 37.5px;height: 37.5px;
}
/*
这个意思是当ul中正好有5个元素时选中其中的前面两个把宽度调为一半
*/
ul:has(li:nth-child(5):last-child) li:nth-child(-n 2) {width: 75px;height: 75px;
}:has() 兼容性需要一点时间
比较可惜的是:has() 在最近的 Selectors Level 4 规范中被确定目前的兼容性还比较惨淡 Chrome 下开启该特性需要1. 浏览器 URL 框输入 chrome://flags2. 开启 #enable-experimental-web-platform-features
