CSS的逻辑组合伪类

news2024/11/27 20:49:51

CSS 的逻辑组合伪类有 4 种，分别是：:not()、:is()、:where()和：has()。

否定伪类:not()

:not 伪类选择器用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类（negation pseudo-class）。

也叫否定伪类，是在元素与括号里面的参数不匹配的时候，就会对这个伪类进行匹配。比如：

:not(span):{color:red}

这就会匹配不是 span 元素的其他所有元素，包括 html 和 body。

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

  1. :not()的优先级是 0，因为它的优先级是由括号里面的参数来定的；
  2. :not()伪类可以同时判断多个选择器，比如input:not(:disabled):not(:read-only)
    {}，表示匹配不属于禁用状态同时也不处于只读状态的 input 元素；
  3. not()支持多个表达式，比如：.cs-li:not(li, dd)
    {}，还有另外一种写法：.cs-li:not(li):not(dd) {}。但是这两种写法，要考虑兼容性问题；
  4. :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 结构，实测的结果不太对劲。

<p>p</p>
<div>div</div>
<span>span</span>
<h1>h1</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：

<button>Test 1</button>
<button>Test 2</button>
<button>Test 3</button>

<style>
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 代码如下：

<div><i>div i</i></div>
<p><i>p i</i></p>
<div><span>div span</span></div>
<p><span>p span</span></p>
<h1><span>h1 span</span></h1>
<h1><i>h1 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 是一模一样的。它们的核心区别点在于 优先级。

来看这样一个例子：

<div>
    <p>where & is test</p>
</div>

css：

: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;
}

例如：

<div>
    <p>div -- p</p>
</div>
<div>
    <p class="g-test-has">div -- p.has</p>
</div>
<div>
    <p>div -- p</p>
</div>

<style>
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[type='submit'] {
  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() 内还可以写的更为复杂一点。例如：

<div>
  <span>div span</span>
</div>
<div>
  <ul>
      <li>
          <h2><span>div ul li h2 span</span></h2>
      </li>
  </ul>
</div>
<div>
  <h2><span>div h2 span</span></h2>
</div>

<style>
div:has(>h2>span) {
  margin-left: 24px;
  border: 1px solid #000;
}
</style>

这里，要求准确选择 div 下直接子元素是 h2，且 h2 下直接子元素有 span 的 div 元素。注意，选择的最上层使用 :has() 的父元素 div。结果如下：
在这里插入图片描述
这里体现的是嵌套结构，精确寻找对应的父元素。

还有一种情况，在之前也比较难处理，同级结构的兄元素选择。

例如：

<div class="has-test">div + p</div>
<p>p</p>

<div class="has-test">div + h1</div>
<h1>h1</h1>

<div class="has-test">div + h2</div>
<h2>h2</h2>

<div class="has-test">div + ul</div>
<ul>ul</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://flags，2. 开启 #enable-experimental-web-platform-features

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1291234.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

编程实战：类C语法的编译型脚本解释器（九）编译语句

编程实战：类C语法的编译型脚本解释器（九）编译语句

系列入口&#xff1a;编程实战&#xff1a;类C语法的编译型脚本解释器&#xff08;系列&#xff09;-CSDN博客 前文已经介绍了编译入口&#xff0c;核心就是语句&#xff0c;本文介绍语句的编译。 目录 一、代码概览 二、辅助函数 2.1 tokens.IsPosNotToken(pos) 2.2 toke…
阅读更多...
华为快应用遇到的坑（uniapp开发）

华为快应用遇到的坑（uniapp开发）

我这边是使用uniapp开发的华为快应用&#xff0c;我想实现的效果就是收藏功能&#xff0c;点击白色收藏&#xff0c;收藏变成红色&#xff0c;点击红色收藏变成白色收藏 <template><cover-view click"collect"><cover-image v-if"is_collect&quo…
阅读更多...
cocos creator “TypeError: Cannot set property ‘string‘ of null

cocos creator “TypeError: Cannot set property ‘string‘ of null

背景&#xff1a; 学习cocos creator时遇到"TypeError: Cannot set property string of null" 错误。具体代码如下&#xff1a;property({ type: Label })public stepsLabel: Label | null null;update(deltaTime: number) {this.stepsLabel.string Math.floor(…
阅读更多...
在Linux系统中更换yum源为阿里云

在Linux系统中更换yum源为阿里云

(꒪ꇴ꒪ )&#xff0c;Hello我是祐言QAQ我的博客主页&#xff1a;C/C语言&#xff0c;数据结构&#xff0c;Linux基础&#xff0c;ARM开发板&#xff0c;网络编程等领域UP&#x1f30d;快上&#x1f698;&#xff0c;一起学习&#xff0c;让我们成为一个强大的攻城狮&#xff0…
阅读更多...
学生成绩管理系统（Java）

学生成绩管理系统（Java）

开发环境: Windows 11 IDEA 2021.3.3 需求: package com.it.neu;import java.util.ArrayList; import java.util.Scanner;import static java.time.Clock.system;class Student { //创建学生类private String Stu_name;private String Stu_id;public Student(String id, S…
阅读更多...
C++使用策略模式，减少使用switch...case...

C++使用策略模式，减少使用switch...case...

目录 原理函数类模板函数使用switch...case...不使用switch...case... 知识点decltypestd::remove_reference 原理 函数 #include <iostream> #include <functional> #include <map>void fun1(int a, int b) {std::cout << "fun1 : a "<…
阅读更多...
学生成绩的增删改查

学生成绩的增删改查

接上一篇MySQL数据库与其管理工具Navicat link 1.下载JDBC 可以登录MySQL的官方网站&#xff1a;www.mysql.com&#xff0c;下载JDBC-MySQL数据库驱动&#xff08;JDBC Driver for MySQL&#xff09;下载mysql-connector-java-5.1.40.zip后&#xff0c;将该zip文件解压至硬盘&a…
阅读更多...
当使用RSA加密，从手机前端到服务器后端的请求数据存在+

当使用RSA加密，从手机前端到服务器后端的请求数据存在+

将转成了空格&#xff0c;导致解密出错 将空格转成了
阅读更多...
Numpy 实现基尼指数算法的决策树

Numpy 实现基尼指数算法的决策树

基尼系数实现决策树 基尼指数 Gini ⁡ ( D ) 1 − ∑ k 1 K ( ∣ C k ∣ ∣ D ∣ ) 2 \operatorname{Gini}(D)1-\sum_{k1}^{K}\left(\frac{\left|C_{k}\right|}{|D|}\right)^{2} Gini(D)1−k1∑K​(∣D∣∣Ck​∣​)2 特征 A A A条件下集合 D D D的基尼指数&#xff1a; Gi…
阅读更多...
『VUE3后台—硅谷甄选』

『VUE3后台—硅谷甄选』

一、准备前期 pnpm create vite
阅读更多...
学习Python的未来前景分析

学习Python的未来前景分析

文章目录 前言学python可以干什么如果具备Python编程&#xff0c;能用Python做什么&#xff1a;学Python语言能干什么1.常规软件开发2.科学计算3.自动化运维4.云计算 学python编程对未来的影响关于Python技术储备一、Python所有方向的学习路线二、Python基础学习视频三、精品Py…
阅读更多...
2024年江苏省职业院校技能大赛信息安全管理与评估 第二阶段学生组（样卷）

2024年江苏省职业院校技能大赛信息安全管理与评估 第二阶段学生组（样卷）

2024年江苏省职业院校技能大赛信息安全管理与评估 第二阶段学生组&#xff08;样卷&#xff09; 竞赛项目赛题 本文件为信息安全管理与评估项目竞赛-第二阶段样题&#xff0c;内容包括&#xff1a;网络安全事件响应、数字取证调查、应用程序安全。 本次比赛时间为180分钟。 …
阅读更多...
星钻图形输出

星钻图形输出

答案&#xff1a; #include <stdio.h> int a 0, b 0; void printLine(int a , int b) //输出一行包含&#xff1a;若干个空格 若干个*&#xff0c;第一&#xff0c;二个参数为空格数和*数&#xff1b; (定义一个星钻输出函数) {while (a--) //打印a个空格{printf(…
阅读更多...
小程序左右侧边栏

小程序左右侧边栏

效果 点击左侧边栏&#xff0c;右侧会定位到对应内容&#xff1b; 右侧滑动&#xff0c;左侧也会显示对应的高亮&#xff1b; 也就是左右联动的效果 项目场景 tocc-app 应急巡检 传入数据: 左侧点击&#xff0c;右侧滚动到对应位置 点击左侧导航条&#xff0c;就计算出右…
阅读更多...
JavaScript面向对象编程的奥秘揭秘：掌握核心概念与设计模式

JavaScript面向对象编程的奥秘揭秘：掌握核心概念与设计模式

​&#x1f308;个人主页&#xff1a;前端青山 &#x1f525;系列专栏&#xff1a;JavaScript篇 &#x1f516;人终将被年少不可得之物困其一生 依旧青山,本期给大家带来JavaScript篇专栏内容:JavaScript-面向对象 目录 什么是面向对象&#xff1f; 类与对象的主要区别 创建…
阅读更多...
【数据结构】- 详解哈夫曼树（用 C 语言实现哈夫曼树的构造和哈夫曼编码）

【数据结构】- 详解哈夫曼树（用 C 语言实现哈夫曼树的构造和哈夫曼编码）

目录 一、哈夫曼树的基本概念 二、哈夫曼树的构造算法 2.1 - 哈夫曼树的构造过程 2.2 - 哈夫曼树的存储表示 2.3 - 算法实现 三、哈夫曼编码 3.1 - 哈夫曼编码的主要思想 3.2 - 哈夫曼编码的性质 3.3 - 算法实现 一、哈夫曼树的基本概念 哈夫曼树的定义&#xff0c;涉…
阅读更多...
电脑字体大小怎么设置？学会这3个方法，轻松调节！

电脑字体大小怎么设置？学会这3个方法，轻松调节！

“感觉我近视又加深了&#xff0c;最近看电脑居然感觉字体有点小。我想把字体放大一点但却不知道应该怎么操作&#xff0c;有没有朋友可以指导一下我呀&#xff1f;” 在我们的日常生活中&#xff0c;电脑已经成为我们获取信息、交流和娱乐的重要工具。字体大小作为电脑显示的基…
阅读更多...
厦门基础城建中排水管网作用，助力提升城市韧性

厦门基础城建中排水管网作用，助力提升城市韧性

在厦门这个美丽的海滨城市&#xff0c;城市建设与发展日新月异&#xff0c;其中&#xff0c;城市生命线下的排水管网监测系统作为城市基础设施的重要组成部分&#xff0c;对保障城市安全、提升城市品质发挥着关键作用。 对于厦门城市建设中的排水管网监测系统安装策略 1. 合理…
阅读更多...
【头歌系统数据库实验】实验2 MySQL软件操作及建库建表建数据

【头歌系统数据库实验】实验2 MySQL软件操作及建库建表建数据

目录 第1关&#xff1a;创建数据库 第2关&#xff1a;创建供应商表S&#xff0c;并插入数据 第3关&#xff1a;创建零件表P&#xff0c;并插入数据 第4关&#xff1a;创建工程项目表J&#xff0c;并插入数据 第5关&#xff1a;创建供应情况表SPJ&#xff0c;并插入数据 …
阅读更多...
软件开发文档的内容

软件开发文档的内容

软件开发文档是开发过程中用于记录、指导和沟通的重要工具。它可以包含多个文档&#xff0c;每个文档都有其特定的格式和目的。以下是一些常见的软件开发文档及其可能的格式&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023