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

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

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

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

相关文章

微服务中间件 RabbitMq学习

1、为什么需要Mq 例如在用户注册业务中&#xff0c;用户注册成功后 需要发注册邮件和注册短信&#xff0c;传统的做法有两种 1.串行的方式&#xff1b;2.并行的方式 &#xff1b; 假设三个业务节点分别使用50ms&#xff0c;串行方式使用时间150ms&#xff0c;并行使用时间10…

如何编写具有完备性的测试用例 ? 具体思路是什么 ? 全套解决方案打包呈现给你 。

设计测试用例应该算是测试人员最为主要的工作之一 &#xff0c;好的测试用例往往具有覆盖性强 &#xff0c;扩展性高以及复用性好等特点 。该如何设计出好的测试用例 &#xff1f;是我们每一位测试人员需要重点思考的问题 &#xff0c;下面是我对设计测试用例设计的思考 &#…

代码随想录 Leetcode40.组合总和 II

题目&#xff1a; 代码&#xff08;首刷看解析 2024年2月1日&#xff09;&#xff1a; class Solution { public:vector<vector<int>> res;vector<int> path;void backtracking(vector<int>& candidates, int target, int startIndex, vector<…

opencv#41 轮廓检测

轮廓概念介绍 通常我们使用二值化的图像进行轮廓检测&#xff0c;对轮廓以外到内进行数字命名&#xff0c;如下图&#xff0c;最外面的轮廓命名为0&#xff0c;向内部进行扩展&#xff0c;遇到黑色白色相交区域&#xff0c;就是一个新的轮廓&#xff0c;然后依次对轮廓进行编号…

玛格全屋定制携手君子签,实现业务信息、流程、合同全面数字化

中国定制家居领导品牌——玛格全屋定制携手君子签&#xff0c;部署玛格业务系统&#xff0c;将电子签章系统与供应链上下游业务合同签署场景融合&#xff0c;通过无纸化、电子化的签署环境&#xff0c;打造业务“线上审批、签署、归档”闭环&#xff0c;助推业务减负提效。 电…

prometheus的alertmanager监控报警

监控告警&#xff1a; alert是一个单独的模块&#xff0c;需要我们单独的配置。 需要声明一个邮箱地址。配置是以configmap进行部署。 alert 实验&#xff1a; vim alert-cfg.yaml apiVersion: v1 kind: ConfigMap metadata:name: alertmanagernamespace: monitor-sa data…

跟着cherno手搓游戏引擎【16】Camera和Uniform变量的封装

相机封装&#xff1a; OrthographicCamera.h: #pragma once #include <glm/glm.hpp> namespace YOTO {class OrthographicCamera{public:OrthographicCamera(float left,float right , float bottom,float top);const glm::vec3& GetPosition()const { return m_Pos…

对同一文件多次mmap

abstract 问&#xff1a;对同一个文件多次mmap&#xff0c;返回的地址相同吗? 答&#xff1a;不相同 code #ifdef __linux__#include <unistd.h> #include <sys/types.h> #include <sys/stat.h> #include <fcntl.h> #include <sys/mman.h> …

Vue-49、Vue技术实现动画效果

1、首先&#xff0c;在Vue项目中的src/components文件夹下创建一个名为AnimatedBox.vue的文件。 2、编辑AnimatedBox.vue文件&#xff0c;添加以下代码&#xff1a; <template><div class"animated-box" click"toggle"><transition name&q…

【C++】STL优先级队列(priority_queue)

priority_queue 基本介绍 priority_queue就是优先级队列。其头文件就是queue&#xff0c;但是队列和优先级队列关系不大&#xff0c;两个是不同的数据结构。但二者都是适配器&#xff0c;容器适配器。 优先级队列中存放的数据是有优先级的。 其内部有以下成员方法&#xff0c…

使用post-css实现移动端适配

介绍移动端适配以及适配方案 适配原因 移动端不像PC端,有足够大的屏幕展示较多的内容不同的移动端设备&#xff0c;有不同屏幕宽度同样大小的页面元素在不同屏幕宽度设备展示时&#xff0c;布局就会错乱有些元素没有展示在可视范围内有些元素不能撑满整个屏幕&#xf…

【Linux】初始进程地址空间

最近&#xff0c;我发现了一个超级强大的人工智能学习网站。它以通俗易懂的方式呈现复杂的概念&#xff0c;而且内容风趣幽默。我觉得它对大家可能会有所帮助&#xff0c;所以我在此分享。点击这里跳转到网站。 目录 一、再谈fork二、程序地址空间2.1代码验证 三、虚拟地址&am…

成熟的汽车制造供应商协同平台 要具备哪些功能特性?

汽车行业是一个产业链长且“重”的行业&#xff0c;整个业务流程包括了研发、设计、采购、库存、生产、销售、售后等一系列环节&#xff0c;在每一个环节都涉及到很多信息交换的需求。对内要保证研发、采购、营销等业务环节信息流通高效安全&#xff0c;对外要与上、下游合作伙…

Python编程实验一:流程控制结构

目录 一、实验目的与要求 二、实验内容 三、主要程序清单和程序运行结果 第1题 第2题 第3题 第4题 四、实验结果分析与体会 一、实验目的与要求 &#xff08;1&#xff09;通过本次实验&#xff0c;学生应掌握多分支语句 if …elif…else结构的用法&#xff1b; &…

vue3/vue2中自定义指令不可输入小数点.

import { directive } from vueconst noDecimal {mounted(el) {el.addEventListener(keypress, (e) > {if (e.key .) {e.preventDefault() }})} }// 使用自定义指令 directive(no-decimal, noDecimal)使用 标签上添加 v-no-decimal <el-input…

重磅!讯飞星火V3.5正式发布,3大核心能力超GPT-4 Turbo!

1月30日&#xff0c;科大讯飞召开星火认知大模型V3.5升级发布会&#xff0c;这是国内首个基于全国产算力训练的多模态认知大模型。科大讯飞董事长刘庆峰先生、研究院院长刘聪先生出席了大会&#xff0c;并对最新产品进行了多维度解读。 讯飞星火V3.5的7大核心能力实现全面大幅…

【Python】P2 Python3 安装使用

目录 新手教程开发教程 本篇博客文章划分为两个主要部分&#xff1a; 【新手教程】旨在为 Python 编程的新手提供指导&#xff0c;适合于初学者入门&#xff0c;但不太适合用于开发大型项目&#xff1b;【开发教程】则面向那些已经有项目开发经验或者希望迅速提升开发技能的读…

BUUCTF-Real-[ThinkPHP]5-Rce

1、ThinkPHP检测工具 https://github.com/anx0ing/thinkphp_scan 漏洞检测 通过漏洞检测&#xff0c;我们发现存在rce漏洞&#xff01; 2、漏洞利用 ---- [!] Name: Thinkphp5 5.0.22/5.1.29 Remote Code Execution VulnerabilityScript: thinkphp5022_5129.pyUrl: http://n…

新春营销不间断,AI 整活更省心

新年、春节历来都是营销的大热节点&#xff0c;各种好物集、年货节、送礼清单比比皆是。这些新鲜玩法的背后是大量的品牌内容「弹药库」。 然而&#xff0c;品牌想在竞争激烈的新春季刷满存在感&#xff0c;并非易事。一方面&#xff0c;节日期间&#xff0c;消费者对于内容的审…

Tensorflow2.0笔记 - where,scatter_nd, meshgrid相关操作

本笔记记录tf.where进行元素位置查找&#xff0c;scatter_nd用于指派元素到tensor的特定位置&#xff0c;meshgrid用作绘图的相关操作。 import tensorflow as tf import numpy as np import matplotlib.pyplot as plttf.__version__#where操作查找元素位置 #输入的tensor是Tr…