达州做网站
大橙子网站建设，新征程启航
为企业提供网站建设、域名注册、服务器等服务
CSS3中的逻辑选择器有哪些
本篇内容介绍了“CSS3中的逻辑选择器有哪些”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
创新互联专业为企业提供西岗网站建设、西岗做网站、西岗网站设计、西岗网站制作等企业网站建设、网页设计与制作、西岗企业网站模板建站服务，10年西岗做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。
在 CSS 选择器家族中，新增这样一类比较新的选择器 -- 逻辑选择器，目前共有 4 名成员：
:is:where:not:has
:is 伪类选择器
:is() CSS伪类函数将选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素。
在之前，对于多个不同父容器的同个子元素的一些共性样式设置，可能会出现如下 CSS 代码：
header p:hover,
main p:hover,
footer p:hover {
color: red;
cursor: pointer;
}而如今有了 :is() 伪类，上述代码可以改写成：
:is(header, main, footer) p:hover {
color: red;
cursor: pointer;
}它并没有实现某种选择器的新功能，更像是一种语法糖，类似于 JavaScript ES6 中的 Class() 语法，只是对原有功能的重新封装设计，实现了更容易的表达一个操作的语法，简化了某些复杂代码的写法。
语法糖(syntactic sugar)是指编程语言中可以更容易的表达一个操作的语法，它可以使程序员更加容易去使用这门语言，操作可以变得更加清晰、方便，或者更加符合程序员的编程习惯。用比较通俗易懂的方式去理解就是，在之前的某个语法的基础上改变了一种写法，实现的功能相同，但是写法不同了，主要是为了让开发人员在使用过程中更方便易懂。
一图胜前言（引用至 New CSS functional pseudo-class selectors :is() and :where()）：
支持多层层叠连用
再来看看这种情况，原本的 CSS 代码如下：
div ip i
div spanp span
h2 span
h2 i
如果要将上述 HTML 中， 有了 结果如下： 这里，也支持 当然，这个例子比较简单，看不出 可以利用 有个特例，不能用 不能写成： 看这样一种有意思的情况： 我们给带有 如果，这个时候，我们引入 此时，由于 但是，如果，我们在 按照理解，如果把上述选择器拆分，上述代码可以拆分成： 那么，我们有理由猜想，带有 但是，这里，神奇的是，两段文本都变成了 这是由于， 对于 当然，下面 3 个都已经废弃，不建议再继续使用。而到今天（2022-04-27） 了解了 还是这个例子： 上述的代码使用了 这就有意思了，这不是和上面说的 那么它们的区别在什么地方呢？ 首先，从语法上， 来看这样一个例子： where & is test CSS 代码如下： 正常按我们的理解而言， 这是因为， 上述的例子还不是特别明显，我们再稍微改造下： where & is test 我们给 div 添加上一个 id 属性，改造上述 CSS 代码： 即便如此，由于 CSS 选择器的一个非常大的特点就在于组合嵌套。 这里简单总结下， 下面我们介绍一下非常有用的 举个例子，HTML 结构如下： 和
下的 和 的 color 设置为 red，正常的 CSS 可能是这样：div span,
div i,
p span,
p i {
color: red;
}:is() 后，代码可以简化为：:is(div, p) :is(span, i) {
color: red;
}
:is() 的层叠连用。通过 :is(div, p) :is(span, i) 的排列组合，可以组合出上述 4 行的选择器，达到同样的效果。: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 两个伪元素。譬如：注意，仅仅是不支持伪元素，伪类，譬如
:focus、:hover 是支持的。div p::before,
div p::after {
content: "";
//...
}div p:is(::before, ::after) {
content: "";
//...
}:is 选择器的优先级
.test-class 的元素，设置一个默认的颜色：div .test-class {
color: red;
}:is() 进行匹配：div :is(p) {
color: blue;
}div :is(p) 可以看成 div p，优先级是没有 div .test-class 高的，因此，被选中的文本的颜色是不会发生变化的。:is() 选择器中，加上一个 #test-id，情况就不一样了。div :is(p, #text-id) {
color: blue;
}div p {
color: blue;
}
div #text-id {
color: blue;
}#text-id 的 元素由于有了更高优先级的选择器，颜色将会变成 blue，而另外一个 div p 由于优先级不够高的问题，导致第一段文本依旧是 green。blue：
:is() 的优先级是由它的选择器列表中优先级最高的选择器决定的。我们不能把它们割裂开来看。div :is(p, #text-id)，is:() 内部有一个 id 选择器，因此，被该条规则匹配中的元素，全部都会应用 div #id 这一级别的选择器优先级。这里非常重要，再强调一下，对于 :is() 选择器的优先级，我们不能把它们割裂开来看，它们是一个整体，优先级取决于选择器列表中优先级最高的选择器。:is 的别名 :matches() 与 :any()
:is() 是最新的规范命名，在之前，有过有同样功能的选择，分别是：:is(div, p) span {}
// 等同于
:-webkit-any(div, p) span {}
:-moz-any(div, p) span {}
:matches(div, p) span {}:is() 的兼容性已经非常不错了，不需要兼容 IE 系列的话可以考虑开始用起来（配合 autoprefixer），看看 CanIUse：
:where 伪类选择器
:is 后，我们可以再来看看 :where，它们两个有着非常强的关联性。:where 同样是将选择器列表作为其参数，并选择可以由该列表中的选择器之一选择的任何元素。:where(header, main, footer) p:hover {
color: red;
cursor: pointer;
}:where，可以近似的看为：header p:hover,
main p:hover,
footer p:hover {
color: red;
cursor: pointer;
}:is 一样了么？:is 和 :where 的区别:is 和 :where 是一模一样的。它们的核心区别点在于 优先级。
: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() 的优先级是由它的选择器列表中优先级最高的选择器决定的。:is(div) p {
color: red;
}
:where(#container) p {
color: green;
}:where(#container) 的优先级为 0，因此文字的颜色，依旧为红色 red。:where() 的优先级总是为 0这一点在使用的过程中需要牢记。组合、嵌套
:is 和 :where 也不例外，因此，它们也可以互相组合嵌套使用，下述的 CSS 选择器都是合理的：/* 组合*/
:is(h2,h3) :where(.test-a, .test-b) {
text-transform: uppercase;
}
/* 嵌套*/
.title:where(h2, h3, :is(.header, .footer)) {
font-weight: bold;
}:is 和 :where 都是非常好的分组逻辑选择器，唯一的区别在于:where() 的优先级总是为 0，而:is() 的优先级是由它的选择器列表中优先级最高的选择器决定的。:not 伪类选择器
:not 伪类选择器。:not 伪类选择器用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类（negation pseudo-class）。
