【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>

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

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

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

k8s中调整Pod数量限制的方法

一、介绍 Kubernetes节点每个默认允许最多创建110个pod&#xff0c;有时可能由于主机配置扩容的问题&#xff0c;从而需要修改节点pod运行数量的限制。 即&#xff1a;需要调整Node节点的最大可运行Pod数量。 一般来说&#xff0c;只需要在kubelet启动命令中增加–max-pods参数…

大数据 - Hadoop系列《四》- MapReduce(分布式计算引擎)的核心思想

上一篇&#xff1a; 大数据 - Hadoop系列《三》- MapReduce&#xff08;分布式计算引擎&#xff09;概述-CSDN博客 目录 13.1 MapReduce实例进程 13.2 阶段组成 13.4 概述 13.4.1 &#x1f959;Map阶段&#xff08;映射&#xff09; 13.4.2 &#x1f959;Reduce阶段执行过…

安卓视图基础

目录 设置视图的宽高 设置视图的间隔 设置视图的对齐方式 设置视图的宽高 设置视图的间隔 设置视图的对齐方式 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"a…

【Linux】线程池的简易实现(懒汉模式)

文章目录 前言一、懒汉方式1.普通模式1.线程安全模式 二、源代码1.Task.hpp(要执行的任务)2.ThreadPool.hpp(线程池)3.Main.cpp 前言 线程池: 一种线程使用模式。线程过多会带来调度开销&#xff0c;进而影响缓存局部性和整体性能。而线程池维护着多个线程&#xff0c;等待着监…

公司如何测试员工对网络钓鱼的反应?

&#x1f4e9; "下午好&#xff0c;文件已经商定。请到下面链接的门户网站下载"。 我们每个人都可能在工作电子邮件中收到此类内容的信息&#xff1a;它可能来自真正的员工&#xff0c;也可能来自公司的信息安全服务部门&#xff0c;该部门决定对您进行检查&#xf…

vue3项目下载@element-plus/icons-vue苦笑不得的乌龙

一、背景 node.js版本&#xff1a;v16.20.1 npm版本&#xff1a;8.19.4 pnpm版本&#xff1a;8.0.0 二、心路历程 pnpm install element-plus/icons-vue 用命令下载element-plus/icons-vue的时候&#xff0c;报错并提醒如图 是&#xff0c;我按照提示执行了&#xff0c;结…

seata Adjusted frame length exceeds 8388608: 539959368,nacos+mysql+seata部署

问题&#xff1a;docker 部署 seata 后出现异常 seata Adjusted frame length exceeds 8388608: 539959368 CSDN上找了一圈都解决不了。github又半天访问不上。后来终于访问上了&#xff0c;发现这是一个很离谱的问题。。。 原因&#xff1a;访问错了端口 seata默认分两个端口…

Google Gemini Pro 国内版

Google Gemini Pro 国内版&#xff1a;【直达链接】 Google Gemini Pro 国内版 能力分类基准测试描述更高分数更好Gemini UltraGPT-4通用MMLU57个主题&#xff08;包括STEM、人文等&#xff09;的问题表示是90.0%86.4%&#xff08;5-shot, 报告&#xff09;推理Big-Bench Hard…

架构设计 高性能带来的复杂度

架构设计的主要目的是为了解决软件系统复杂度带来的问题。 复杂度来源之一就是软件的高性能。 对性能孜孜不倦的追求是整个人类技术不断发展的根本驱动力。例如计算机&#xff0c;从电子管计算机到晶体管计算机再到集成电路计算机&#xff0c;运算性能从每秒几次提升到每秒几…

OpenHarmony(鸿蒙应用开发 - 实战篇 四 ):工程目录结构。

简介 OpenHarmony是由开放原子开源基金会&#xff08;OpenAtom Foundation&#xff09;孵化及运营的开源项目&#xff0c;目标是面向全场景、全连接、全智能时代&#xff0c;基于开源的方式&#xff0c;搭建一个智能终端设备操作系统的框架和平台&#xff0c;促进万物互联产业…

毕业设计过程学习

传统的目标检测算法主要通过人工设计与纹理、颜色和形状相关的特征来进行目标区域特征的提取。随着深度学习和人工智能技术的飞速发展&#xff0c;目标检测技术也取得了很大的成就。早期基于深度学习的目标检测算法的研究方向仍然是将目标定位任务和图像分类任务分离开来的&…

【2024程序员必看】鸿蒙应用开发行业分析

鸿蒙操作系统沉浸四年&#xff0c;这次终于迎来了破局的机会&#xff0c;自从2023年华为秋季发布会上宣布鸿蒙 Next操作系统不在兼容Android后&#xff0c;就有不少大厂开始陆续与华为达成了鸿蒙原生应用的开发合作&#xff0c;据1月18日华为官方宣布110多天的产业合力“突进”…