【CSS】css获取子元素的父元素,即通过子元素选择父元素(使用CSS伪类 :has() :not() )

这里写目录标题

  • 一、:has
    • 获取第一个div
    • 获取包含 a.active 的 li
    • 获取第二个div
  • 二、:not
    • 除了类名为active 的 a,其他的a的字体都为18px

    <div>
		<h1>标题</h1>
	</div>
	<div>
		<ul>
			<li>
				<a href="#" class="active">测试1</a>
			</li>
			<li>
				<a href="#">测试2</a>
			</li>
		</ul>
	</div>
	<h2>4444</h2>

一、:has

  • :has伪类接受一个选择器组作为参数

获取第一个div

  div:has(h1){
	    background-color:red;
	}

获取包含 a.active 的 li

 li:has(> a.active){
    color:red;
}

获取第二个div

  • :has() 父选择器支持 同级结构的兄元素选择
div:has(+ h2) {
margin-left: 24px;
border: 1px solid #000;
}

二、:not

  • :not的作用是防止特定的元素被选中,也被称为反选伪类

除了类名为active 的 a,其他的a的字体都为18px

a:not(.active){
		    font-size:18px;
		}

最后,如果能帮到你
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Filter与Listener(Java Web)

Filter与Listener(Java Web) 概念&#xff1a;Filter表示过滤器&#xff0c;是JavaWeb三大组件(Servlet、Filter、Listener)之一。过滤器可以把对资源的请求拦截下来&#xff0c;从而实现一些特殊的功能。过滤器一般完成一些通用的操作&#xff0c;比如&#xff1a;权限控制、…

mysql按周统计数据简述

概述 业务中经常会遇到按年月日统计的场景&#xff1b; 但有时会有按周统计的情况&#xff1b; 我一般是用2中方法去解决&#xff1a; 利用mysql的weekday函数。计算出当前日期是一周中的第几天&#xff0c;然后当前日期 - 这个数值&#xff0c;就可以得到当前周的周一的日期…

Python—数据可视化Seaborn大全:参数详解与实战案例全解析【第52篇—python:Seaborn大全】

文章目录 Seaborn库常用绘图详解与实战引言安装与导入一、散点图参数说明实战案例 二、直方图参数说明实战案例 三、线性关系图参数说明实战案例 四、热力图参数说明实战案例 五、分布图参数说明实战案例 六、箱线图参数说明实战案例 七、联合分布图参数说明实战案例 八、小提琴…

钓鱼攻击:深度解析与防范策略

一、引言 在当今的网络世界中&#xff0c;钓鱼攻击已经成为一种日益猖獗的威胁。这种攻击方式利用电子邮件、社交媒体或其他在线平台&#xff0c;伪装成可信赖的来源&#xff0c;诱导受害者点击恶意链接或下载恶意附件&#xff0c;进而窃取个人信息或实施其他恶意行为。本文将…

[SWPUCTF 2021 新生赛]easyupload2.0

一开始我通过cobaltstrike写一个文件上传的木马它不允许上传php文件 我这边写了一句话木马通过burp拦截修改后缀为phtml然后通过蚁剑找flag

centos7安装oracle

1 安装虚拟机 设置4G内存&#xff0c;硬盘40G 2 配置网络环境 2.1配置主机名 # vi /etc/hostname 修改为 oracle2.2 配置IP地址 # vi /etc/sysconfig/network-scripts/ifcfg-ens33 修改 BOOTPROTO"static" ONBOOT"yes" IPADDR192.168.109.110 NETMAS…

政安晨:示例演绎Python的函数与获取帮助的方法

调用函数和定义我们自己的函数&#xff0c;并使用Python内置的文档&#xff0c;是成为一位Pythoner的开始。 通过我的上篇文章&#xff0c;相信您已经看过并使用了print和abs等函数。但是Python还有许多其他函数&#xff0c;并且定义自己的函数是Python编程的重要部分。 在本…

027 方法的定义及调用

方法的定义 方法调用 设计方法的原则 使用场景 想象一下有个场景需要我们不断频繁地去使用某部分特定的代码&#xff0c;我们自然可以通过复制粘贴去完成&#xff0c;但是这样会导致代码又臭又长&#xff0c;大部分是重复的代码&#xff0c;这不利于我们后续的维护&#xff0c;…

一键转换MOV至MP3:轻松删除原视频,释放存储空间!

你是否曾经有一个MOV格式的视频文件&#xff0c;想要提取其中的音频却苦于没有合适的工具&#xff1f;现在&#xff0c;有了我们的全新视频剪辑工具&#xff0c;这个烦恼全部消失&#xff01;我们为你提供一键式解决方案&#xff0c;将MOV视频文件快速转换为MP3音频格式。 首先…

tidb节点重启后,服务无法重连

大家好&#xff0c;我是烤鸭&#xff1a; 前几天遇到tidb节点重启后服务无法重连&#xff0c;确切地说是两个服务&#xff0c;一个可以正常重连&#xff0c;一个不行。 问题复现 由于线上执行慢SQL&#xff0c;导致TiDB 单个节点宕机重启。 其中A服务的3个节点和B服务的1个节…

电商实战练习部署

基于阿里云ECS服务器实战部署 1 单架构部署方案 1.1 部署流程 传统方案 基于docker 2 持续集成&持续部署方案 随着软件开发复杂度的不断提高&#xff0c;团队开发成员间如何更好地协同工作以确保软件 开发的质量已经慢慢成为开发过程中不可回避的问题。互联网软件的开发…

153基于matlab的滚动轴承故障诊断

基于matlab的滚动轴承故障诊断&#xff0c;基于小波包分解&#xff0c;得到数据峭度值&#xff0c;以正常与故障数据峭度差值进行最大尺度重构&#xff0c;对重构信号进行包络谱分析。程序已调通&#xff0c;可直接运行。 153matlab 信号重构 包络谱分析 故障诊断 (xiaohongshu…

通过html2canvas和jsPDF将网页内容导出成pdf

jsPDF参考&#xff1a;https://github.com/parallax/jsPDF html2canvas参考&#xff1a;https://github.com/niklasvh/html2canvas 或者 https://html2canvas.hertzen.com 思路 使用html2canvas将选中DOM生成截图对象将截图对象借助jsPDF导出为PDF文件 代码 这是一个示例&a…

gorm day1

gorm day1 gorm简介gorm声明模型 代码样例基本来自官方文档 Gorm简介 什么是ORM&#xff1f; 对象关系映射(Objection Relational Mapping,简称ORM)模式是一种为了解决面向对象与关系数据库(如mysql数据库&#xff09;存在的互不匹配现象的计数。简单来说&#xff0c;ORM是通…

西瓜书学习笔记——主成分分析(公式推导+举例应用)

文章目录 算法介绍实验分析 算法介绍 主成分分析&#xff08;Principal Component Analysis&#xff0c;PCA&#xff09;是一种常用的降维技术&#xff0c;用于在高维数据中发现最重要的特征或主成分。PCA的目标是通过线性变换将原始数据转换成一组新的特征&#xff0c;这些新…

C++ OpenGL绘制三维立体skybox场景obj模型AABB碰撞检测旋转动画界面

程序示例精选 C OpenGL绘制三维立体skybox场景obj模型AABB碰撞检测旋转动画界面 如需安装运行环境或远程调试&#xff0c;见文章底部个人QQ名片&#xff0c;由专业技术人员远程协助&#xff01; 前言 这篇博客针对《C OpenGL绘制三维立体skybox场景obj模型AABB碰撞检测旋转动…

HBase 数据导入导出

HBase 数据导入导出 1. 使用 Docker 部署 HBase2. HBase 命令查找3. 命令行操作 HBase3.1 HBase shell 命令3.2 查看命名空间3.3 查看命名空间下的表3.4 新建命名空间3.5 查看具体表结构3.6 创建表 4. HBase 数据导出、导入4.1 导出 HBase 中的某个表数据4.2 导入 HBase 中的某…

从源代码看Chrome 版本号

一直以来都是用Chrome 浏览器&#xff0c;但是看到Chrome 点分4 组数据的表达方式&#xff0c;总是感觉怪怪的&#xff0c;遂深入源代码了解她的版本号具体表示的内容 chrome 浏览器中显示的版本号 源代码中的版本号标识 版本号文件位于 chrome/VERSION &#xff0c; 看到源代…

nginx初学者指南

一、启动、停止和重新加载配置 前提&#xff1a;先要启动nginx 在Windows上启动nginx的步骤如下&#xff1a; 1. 下载并安装nginx。可以从nginx官网下载适合自己操作系统的版本&#xff0c;一般是zip压缩包&#xff0c;解压到指定目录中。 2. 进入nginx的安装目录&#xff…

Shell脚本⑧免交互

目录 一.Here Document 1.定义 2.变量 &#xff08;1&#xff09;变量替换成实际值 &#xff08;2&#xff09;整行内容作为变量并输出结果 &#xff08;3&#xff09;多行注释 &#xff08;4&#xff09;自动划分磁盘免交互 二.Expect 1.定义 2.安装 3.免交互操作 …