当前位置： 首页 > news >正文

CSS扩展选择器

news 2025/11/1 15:18:35

文章目录

  • 1. 并集选择器
  • 2. 交集选择器
  • 3. 后代选择器
  • 4. 子代选择器
  • 5. 兄弟选择器
    • 5.1. 相邻兄弟选择器
    • 5.2. 通用兄弟选择器
  • 6. 属性选择器
  • 7. 伪类选择器
    • 7.1. 动态伪类
    • 7.2. 结构伪类
    • 7.3. 否定伪类
  • 8. 伪元素选择器
  • 9. Google 改进案例

1. 并集选择器

选中多个选择器对应的元素。一般用来设置表格的边框。

语法：选择器 1, 选择器 2, 选择器 3, … 选择器 n {}

2. 交集选择器

同时选中符合条件的元素。

语法：选择器 1 选择器 2 选择器 3…选择器 n {}

3. 后代选择器

用来选择元素或元素组的后代，需要先写祖先，再写后代。

语法：选择器 1 选择器 2 选择器 3 … 选择器 n {}

4. 子代选择器

选中指定元素中，符合要求的子元素，父级标签写在前面，子级标签写在后面，中间有一个**>**。

语法：选择器 1 > 选择器 2 > 选择器 3 > … 选择器 n {}

5. 兄弟选择器

5.1. 相邻兄弟选择器

选中指定元素后，符合条件的相邻兄弟元素，二者是同一个父亲。

语法：选择器 1+选择器 2 {}

5.2. 通用兄弟选择器

选中指定元素后，符合条件的所有兄弟元素，只要是同一个父元素，都会被选择。

语法：选择器 1~选择器 2 {}

6. 属性选择器

选中具有某种属性的元素。

语法：

  1. [属性名] 选中具有某个属性的元素。
  2. [属性名=“值”] 选中包含某个属性，且属性值等于给定值的元素。
  3. [属性名^=“值”] 选中包含某个属性，且属性值以给定值开头的元素。
  4. [属性名$=“值”] 选中包含某个属性，且属性值以给定值结尾的元素。
  5. [属性名*=“值”] 选择包含某个属性，属性值包含给定值的元素
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>/* 需求:选择跟div相邻的p元素 设置成红色 *//* 方式一:通过属性选择器(通过属性名) */[data] {color: red;}/* 方式二:通过属性选择器(通过属性名=属性值) */[data="d1"] {color: green;}</style></head><body><div><span>我是span标签</span><p data="d1">我是带有属性的p标签</p></div><p>我是p标签</p><p data="d1">我是带有属性的p标签</p></body>
</html>

image-20240308231113649

7. 伪类选择器

选中特殊状态的元素 。

7.1. 动态伪类

伪类属性
:link超链接未被访问的状态
:visited超链接访问过的状态
:hover鼠标悬停在元素上的状态
:active元素激活的状态
:focus获取焦点的元素
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>07-CSS扩展选择器-伪类选择器</title><style>a,span {font-size: 50px;}a:link {color: red;}a:visited {color: green;}a:hover {color: blue;}a:active {color: yellow;}</style></head><body><a href="https://douglas.blog.csdn.net/">博客</a><span>文字</span></body>
</html>

QQ录屏20240308232306 -original-original

7.2. 结构伪类

伪类属性
:first-child所有兄弟元素中的第一个
:last-child所有兄弟元素中的最后一个
:nth-child(n)所有兄弟元素中的第 n 个（元素类型没有限制）
:first-of-type所有同类型兄弟元素中的第一个
:last-of-type所有同类型兄弟元素中的最后一个
:nth-of-type(n)所有同类型兄弟元素中的 第 n 个（元素类型有限制）
:root根元素

:nth-child(n) 选择第 n 个元素

选择多个

  • n 可以是一个数字

    从 1 开始,代表第 n 个元素

  • n 还可以是关键字
    odd 偶数 even 奇数

  • n 可以是一个公式
    an+ b 描述：a 代表一个循环的大小，N 是一个计数器（从 0 开始），以及 b 是偏移量

    • 2n+1 奇数
    • 2n 偶数
    • -n+3 前三个
    • n+4 第 4 个以后

语法区别
:nth-child(n)选择器匹配父元素中的第 n 个子元素，元素类型没有限制。
:nth-of-type(n)选择器匹配同类型中的第 n 个同级兄弟元素。

7.3. 否定伪类

:not(选择器) 排除满足括号中条件的元素。

8. 伪元素选择器

在 html 骨架中，并没有通过 html 标签去创建元素，而是通过 css 模拟出来的标签效果。

一般用在页面的非主体部分，某些情况下可以简化代码。

区别：

  • 普通元素：通过 html 标签生成的。
  • 伪元素：通过 css 模拟出来的标签效果。
  • 本质区别：是否在 html 中创建了新的标签。

常用的伪元素：

伪元素属性
::first-letter选中元素中的第一个文字
::first-line选中元素中的第一行文字
::placeholder选中输入框的提示文字
::before在元素最开始的位置，创建一个子元素（必须用 content 属性指定内容）
::after在元素最后的位置，创建一个子元素（必须用 content 属性指定内容）

9. Google 改进案例

使用动态伪类实现鼠标放在单词上变色。

QQ录屏20240308225446 -original-original

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>05-CSS扩展选择器-Google案例-改进</title><style>/* 设置颜色 */.c1 {color: blue;}.c2 {color: red;}.c3 {color: yellow;}.c4 {color: green;}/* 设置字体 */span {font-size: 100px;}span:hover {color: orange;cursor: pointer;}</style></head><body><span class="c1">G</span><span class="c2">o</span><span class="c3">o</span><span class="c1">g</span><span class="c4">l</span><span class="c2">e</span></body>
</html>

相关文章：

CSS扩展选择器

文章目录 1. 并集选择器2. 交集选择器3. 后代选择器4. 子代选择器5. 兄弟选择器5.1. 相邻兄弟选择器5.2. 通用兄弟选择器 6. 属性选择器7. 伪类选择器7.1. 动态伪类7.2. 结构伪类7.3. 否定伪类 8. 伪元素选择器9. Google 改进案例 1. 并集选择器 选中多个选择器对应的元素。一…...

编程日记 2024/3/17 6:38:06

知名Web3投资基金a16z合伙人Jane Lippencott确认出席Hack.Summit() 2024区块链开发者大会

在区块链技术的风起云涌和Web3生态的蓬勃发展中&#xff0c;知名a16z Crypto的合伙人Jane Lippencott已确认出席即将于2024年4月9日至10日在香港数码港举行的Hack.Summit() 2024区块链开发者大会。作为亚洲首次举办的Hack.Summit()&#xff0c;此次大会将为全球区块链开发者及业…...

编程日记 2024/3/17 6:37:05

电脑那个部件坏了或者是哪个软件需要修复来看价钱

电脑维修价格表是多少&#xff1f; 价格取决于计算机的哪个部分损坏或哪个软件需要修复。 由于电脑中的部件非常多&#xff0c;而且会以各种奇怪的方式出现问题&#xff0c;下面我们就来看看具体的充电方法。 电脑维修价格表&#xff1a; 1. 重新安装系统。 安装XP系统通常需…...

编程日记 2024/3/17 6:36:04

GiT: Towards Generalist Vision Transformer through Universal Language Interface

GiT: Towards Generalist Vision Transformer through Universal Language Interface 相关链接&#xff1a;arxiv github 关键字&#xff1a;Generalist Vision Transformer (GiT)、Universal Language Interface、Multi-task Learning、Zero-shot Transfer、Transformer 摘要 …...

编程日记 2024/3/17 6:30:59

纽约时报起诉OpenAI和微软将决定未来LLM的发展

《纽约时报》诉OpenAI和微软案对未来LLM发展的重大影响 案件背景 《纽约时报》(NYT)近期对OpenAI和微软提起诉讼&#xff0c;指控OpenAI未经授权使用其受版权保护的内容来训练其AI模型&#xff0c;包括ChatGPT。NYT声称&#xff0c;OpenAI使用了数百万篇其文章&#xff0c;这…...

编程日记 2024/3/17 6:28:58

IntelliJ IDEA 面试题及答案整理，最新面试题

IntelliJ IDEA中的插件系统如何工作&#xff1f; IntelliJ IDEA的插件系统工作原理如下&#xff1a; 1、插件架构&#xff1a; IntelliJ IDEA通过插件架构扩展其功能&#xff0c;插件可以添加新的功能或修改现有功能。 2、安装和管理&#xff1a; 通过IDEA内置的插件市场下载…...

编程日记 2024/3/17 6:27:57

T1.数据库MySQL

二.SQL分类 2.1 DDL 2.1.1数据库操作 1). 查询所有数据库 show databases ; 2). 查询当前数据库 select database(); 3)创建数据库 create database [if not exists] 数据库名 [default charset 字符集] [collate 排序规则] ; 4&#xff09;删除数据库 drop database …...

编程日记 2024/3/17 6:25:56

idea中database的一些用法

1、查看表结构 方法1&#xff0c;右键&#xff0c;选这个 方法2 双击表后&#xff0c;看到数据&#xff0c;点DDL 方法3 写SQL时&#xff0c;把鼠标放在表名上&#xff0c;可以快速查看表结构 2、表生成对应的实体类 表中右键&#xff0c;选择这2个&#xff0c;选择生成的路…...

编程日记 2024/3/17 6:23:54

外卖点餐系统 |基于springboot框架+ Mysql+Java+JSP技术+Tomcat的外卖点餐系统 设计与实现(可运行源码+设计文档)

推荐阅读100套最新项目 最新ssmjava项目文档视频演示可运行源码分享 最新jspjava项目文档视频演示可运行源码分享 最新Spring Boot项目文档视频演示可运行源码分享 目录 前台功能效果图 骑手功能模块 商家功能模块 管理员功能登录前台功能效果图 用户功能模块 系统功能设…...

编程日记 2024/3/17 6:22:53

挑战杯 机器视觉的试卷批改系统 - opencv python 视觉识别

文章目录 0 简介1 项目背景2 项目目的3 系统设计3.1 目标对象3.2 系统架构3.3 软件设计方案 4 图像预处理4.1 灰度二值化4.2 形态学处理4.3 算式提取4.4 倾斜校正4.5 字符分割 5 字符识别5.1 支持向量机原理5.2 基于SVM的字符识别5.3 SVM算法实现 6 算法测试7 系统实现8 最后 0…...

编程日记 2024/3/17 6:21:52

Node.js 自带的 http 模块来实现一个简单的本地服务器

1.创建一个 server.js 文件&#xff1a; const http require(http); const fs require(fs); const path require(path);const server http.createServer((req, res) > {// 获取请求的文件路径const filePath path.join(__dirname, dist, req.url);// 读取文件内容并返…...

编程日记 2024/3/17 6:19:51

c++ 设计模式模版方法

最初版本 #pragma onceclass Library { public:void Step1(){}void Step3(){}void Step5(){} };class Appliacation { public:void Step2(){}void Step4(){} };int main() {Library lib;Appliacation app;lib.Step1();app.Step2();lib.Step3();app.Step4();lib.Step5(); }最终…...

编程日记 2024/3/17 6:18:50

踏上机器学习的征程：探索基础概念与学习模式

摘要： 机器学习是当今科技领域最具前沿和应用价值的技术之一，它正在改变我们对数据的理解和利用方式。本文将引导读者深入了解机器学习的基本概念，包括监督学习、无监督学习和半监督学习等，并通过生动的例子解释这些概念，帮助读者迈出学习机器学习的第一步。 导言： 随着…...

编程日记 2024/3/17 6:17:49

基于YOLO的自动驾驶目标检测研究综述

摘要：自动驾驶是人工智能发展领域的一个重要方向，拥有良好的发展前景，而实时准确的目标检测与识别是保证自动驾驶汽车安全稳定运行的基础与关键。回顾自动驾驶和目标检测技术的发展历程，综述了YOLO算法在车辆、行人、交通标志、灯光、车道线等目标检测上的应用，同时对比分…...

编程日记 2024/3/17 6:15:47

深度学习-解读GoogleNet深度学习网络

深度学习-解读GoogleNet深度学习网络 深度学习中&#xff0c;经典网络引领一波又一波的技术革命&#xff0c;从LetNet到当前最火的GPT所用的Transformer&#xff0c;它们把AI技术不断推向高潮。2012年AlexNet大放异彩&#xff0c;它把深度学习技术引领第一个高峰&#xff0c;打…...

编程日记 2024/3/17 6:12:45

【LeetCode: 2684. 矩阵中移动的最大次数 + dfs】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…...

编程日记 2024/3/17 6:11:44

第五节：使用SMB开发WebSocket通信

一、概述 本节主要讲解在SMB中如何进行websocket快速开发&#xff0c;实现客户端连接、关闭、消息通讯等功能。 示例下载&#xff1a;https://download.csdn.net/download/lllllllllluoyi/88949743 二、创建WebSocket服务器 1、在csdnProject工程中新建一个消息流。 添加W…...

编程日记 2024/3/17 6:10:43

Nginx和Ribbon实现负载均衡的区别

Nginx和Ribbon的区别 1. Nginx服务器端负载均衡&#xff1a; 1、Nginx是客户端所有请求统一交给nginx&#xff0c;由nginx进行实现负载均衡请求转发&#xff0c;属于服务器端负载均衡。即请求有nginx服务器端进行转发。 3、Nginx是服务端的负载均衡&#xff0c;Ribbon是客户端…...

编程日记 2024/3/17 6:09:42

流畅的Python(十九)-动态属性和特性

一、核心要义 在Python中,数据的属性和处理数据的方法,统称属性。方法&#xff0c;只是可调用的属性。除了这两者之外,我们还可以创建特性(property),在不改变类接口的前提下,使用存取方法(即读值方法和设值方法)修改数据属性。 二、代码示例 0、相关知识点 #!/usr/bin/env…...

编程日记 2024/3/17 6:07:40

确保云原生部署中的网络安全

数字环境正在以惊人的速度发展&#xff0c;组织正在迅速采用云原生部署和现代化使用微服务和容器构建的应用程序&#xff08;通常运行在 Kubernetes 等平台上&#xff09;&#xff0c;以推动增长。 无论我们谈论可扩展性、效率还是灵活性&#xff0c;对于努力提供无与伦比的用…...

编程日记 2024/3/17 6:06:39

手游刚开服就被攻击怎么办？如何防御DDoS？

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

编程新知 2025/10/30 10:46:47

大话软工笔记—需求分析概述

需求分析&#xff0c;就是要对需求调研收集到的资料信息逐个地进行拆分、研究&#xff0c;从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要&#xff0c;后续设计的依据主要来自于需求分析的成果&#xff0c;包括: 项目的目的…...

编程新知 2025/10/30 1:30:44

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

编程新知 2025/10/27 18:41:17

蓝桥杯 2024 15届国赛 A组 儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡&#xff0c;轻快的音乐在耳边持续回荡&#xff0c;小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下&#xff0c;六一来了。 今天是六一儿童节&#xff0c;小蓝老师为了让大家在节…...

编程新知 2025/9/15 12:06:17

MySQL 部分重点知识篇

一、数据库对象 1. 主键 定义 &#xff1a;主键是用于唯一标识表中每一行记录的字段或字段组合。它具有唯一性和非空性特点。 作用 &#xff1a;确保数据的完整性&#xff0c;便于数据的查询和管理。 示例 &#xff1a;在学生信息表中&#xff0c;学号可以作为主键&#xff…...

编程新知 2025/8/19 22:24:50

给网站添加live2d看板娘

给网站添加live2d看板娘 参考文献&#xff1a; stevenjoezhang/live2d-widget: 把萌萌哒的看板娘抱回家 (ノ≧∇≦)ノ | Live2D widget for web platformEikanya/Live2d-model: Live2d model collectionzenghongtu/live2d-model-assets 前言 网站环境如下&#xff0c;文章也主…...

编程新知 2025/10/29 8:11:07

wpf在image控件上快速显示内存图像

wpf在image控件上快速显示内存图像https://www.cnblogs.com/haodafeng/p/10431387.html 如果你在寻找能够快速在image控件刷新大图像&#xff08;比如分辨率3000*3000的图像&#xff09;的办法&#xff0c;尤其是想把内存中的裸数据&#xff08;只有图像的数据&#xff0c;不包…...

编程新知 2025/10/28 15:01:39

深度学习之模型压缩三驾马车：模型剪枝、模型量化、知识蒸馏

一、引言 在深度学习中&#xff0c;我们训练出的神经网络往往非常庞大&#xff08;比如像 ResNet、YOLOv8、Vision Transformer&#xff09;&#xff0c;虽然精度很高&#xff0c;但“太重”了&#xff0c;运行起来很慢&#xff0c;占用内存大&#xff0c;不适合部署到手机、摄…...

编程新知 2025/9/24 3:56:34

VisualXML全新升级 | 新增数据库编辑功能

VisualXML是一个功能强大的网络总线设计工具&#xff0c;专注于简化汽车电子系统中复杂的网络数据设计操作。它支持多种主流总线网络格式的数据编辑&#xff08;如DBC、LDF、ARXML、HEX等&#xff09;&#xff0c;并能够基于Excel表格的方式生成和转换多种数据库文件。由此&…...

编程新知 2025/10/29 19:50:45

macOS 终端智能代理检测

&#x1f9e0; 终端智能代理检测&#xff1a;自动判断是否需要设置代理访问 GitHub 在开发中&#xff0c;使用 GitHub 是非常常见的需求。但有时候我们会发现某些命令失败、插件无法更新&#xff0c;例如&#xff1a; fatal: unable to access https://github.com/ohmyzsh/oh…...

编程新知 2025/10/29 13:42:32