认识逻辑选择器
:is(header, main, footer) p:hover {
color: red;
cursor: pointer;
}
新出炉的CSS3，为我们带来了四个新“小兄弟”called: is(), where(), not(), has().有了他们，调节元素风格变得更加简单，码字速度也能提升！
div ip i
div spanp span
h1 span
h1 i
:is()选择器的应用
div span,
div i,
p span,
p i {
color: red;
}
以前，想搞个通用样式给多种父元素下面的同类型子元素，可得费劲巴拉地敲半天 CSS 代码啊；现在，有个:is()这个超好用的选择器，只需要简简单单一句话就搞定了！比如说，原来的 div :is(p)现在就能简化为 dive p，感觉整个代码都清爽多了。
:is(div, p) :is(span, i) {
color: red;
}
那个div:is(p,#text-id)这种选择器内有个id选项，也就是说它选的东西是按id权重来配的。而且目前（《2022-04-28》更新呐）的大部分浏览器都支持这个强大的选择符喔！放心大胆儿在项目中用吧～
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(ol, ul, menu, dir) :is(ol, ul, menu, dir) :is(ul, menu, dir) {
list-style-type: square;
}
:where()选择器的特点
div p::before,
div p::after {
content: "";
//...
}
div p:is(::before, ::after) {
content: "";
//...
}
跟: is()一样: where()也能根据你指定的条件挑出对应的元素。但是，它会先把自己的优先级调到最低，然后再去看你设的哪些条件更重要，就选择谁啰！
where & is test
where & is test
这俩伙伴能搭配起来用，给你提供丰富多样的样式选择。说到底，无论是:is()或:where()，都是挺实用的，能帮忙咱们轻松搞定样式管理。
div .test-class {
color: red;
}
div :is(p) {
color: blue;
}
探究:not()选择器
今儿咱们说说这个：not()选人器。你别小瞧这家伙，它在css样式表中可是很重要滴。在CSS Selectors第三代（就是那个很长的数字）时，它只能挑单个东西，但到了第四代，它瞬间变得厉害了，能够选多个人物了。而且，跟我们以前讲过的其他选人器比起来，:not()并不会直接改变它选人的顺序，还是按照原来那套，看谁的地位更高就选谁哈。
div :is(p, #text-id) {
color: blue;
}
div p {
color: blue;
}
div #text-id {
color: blue;
}
你知道吗？当我们遇到特殊情况需要清理数据的时候，”not()”这个神奇的运算符就能派上大用场！但是要注意，别让它变得太复杂，否则可能会拖慢整个程序的进度。
深入理解:focus-visible伪类
这所谓的:focus-visible伪类其实就是为那些能用键盘使元素变明亮的触发焦点一刻准备的哟。那么如果你想了解只有在设置了:focus-visible的浏览器里，鼠标点击才能出现焦点这种特色的话，那就试试看:focus:not(:focus-visible)！
:is(div, p) span {}
// 等同于
:-webkit-any(div, p) span {}
:-moz-any(div, p) span {}
:matches(div, p) span {}
这个功能可是网页浏览体验的大帮手，就算你用的不是那种支持:focus-visible属性的浏览器，也会觉得很顺手。运用好:focus-visible伪类，你的网页使用会更加流畅！
应用场景：has()伪类
:where(header, main, footer) p:hover {
color: red;
cursor: pointer;
}
就是用这种div:has(.g-test-has)找法，找到那些在老爸底下挂着这特别class的小朋友们，就跟照妖镜似的！但注意，这里找到的是他们所处的位置，而并不是他们本身哦～
header p:hover,
main p:hover,
footer p:hover {
color: red;
cursor: pointer;
}
只要用上has()伪类，我们就不怕CSS那个烦人的父元素选择难题，开发起来轻松自如得多！如此强大又便捷的功能，让我们的前端工作速度快了不是一点点呀。
:is(div) p {
color: red;
}
:where(div) p {
color: green;
}
结合应用案例
虽然，你要是学着给HTML结构加点儿复杂逻辑伪类的味道，那可能会遇到点儿麻烦最多就是颜色变得很瞎，比如那个有斜杠的:not(p)选错好多元素，看着就不舒服。再看看那个:hover:not(:hover-visible)，你必须得小心点儿用，不然搞不好会搞出一些稀奇古怪的效果出来
说到底，逻辑伪类这个东东还是得看具体情况，别瞎弄或者太麻烦，免得出岔子影响网页速度。
where & is test
总结与展望
:is(div) p {
color: red;
}
:where(#container) p {
color: green;
}
看看这个，我给你讲讲CSS3的新玩意儿——:is(),:where(),:not(),:has()。它们能让前端变得有趣又好用，就像是锦上添花！
期待网络科技再给力点儿，让CSS在逻辑伪类上有所创新，这样我们设计网页布局就更容易了！
/* 组合*/
:is(h1,h2) :where(.test-a, .test-b) {
text-transform: uppercase;
}
/* 嵌套*/
.title:where(h1, h2, :is(.header, .footer)) {
font-weight: bold;
}
。
评论0