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

CSS 选择器的分类与使用要点一

news 2026/3/28 6:47:09

目录

非 VIP 用户可前往公众号进行免费阅读

标签选择器

id 选择器

类选择器

介绍

公共类

CSS 中优先用 class 选择器，慎用 id 选择器

后代选择器

交集选择器

以标签名作为开头

以类名作为开头

连续交集

并集选择器（分组选择器）

通配符*

儿子选择器 >（IE7 开始兼容，IE6 不兼容）

下一个兄弟选择器（IE7 开始兼容，IE6 不兼容）

序选择器（IE8 开始兼容，IE6、7 都不兼容）

非 VIP 用户可前往公众号进行免费阅读

CSS 选择器的分类与使用要点一这篇文章主要介绍了 CSS 选择器，包括标签选择器、id 选择器、类选择器（含介绍、公共类等），还提到在 CSS 中优先用 class 选择器，慎用 id 选择器，另外还有后代选择器和交集选择器（分以标签名、类名开头及连续交集等情况）。icon-default.png?t=O83Ahttps://mp.weixin.qq.com/s?__biz=MzIxNTcyNjE0NA==&mid=2247484589&idx=1&sn=60d0f725c550261a92d67633639a154d&chksm=9792a582a0e52c94e254d868073069f57d16de20e1c968622145eb27ddd1cabe98256858eee2&scene=21#wechat_redirect

        关注作者微信公众号，开启探索更多 CSS 知识的精彩之旅。在这里，你将收获丰富的CSS专业内容，深入了解这一网页开发语言的奥秘，不断拓展你的知识边界，提升技能水平。快来关注吧！

标签选择器

        标签选择器可选取页面上所有特定类型的标签，其作用力度大致相当于一个类名（约 255 个标签的效果与 1 个类名相近）。它常常被用于描述同类标签的共同特性，然而在精准展现某一特定元素的独特个性方面则稍显乏力。

        示例代码如下：

        css:

<style type="text/css">  
    body{  
        background-color:pink;  
    }  
    h3{  
        font-size: 14px;  
        color: red;  
    }  
    p{  
        background-color: skyblue;  
        text-align: center;  
        font-weight: bold;  
        font-size: 22px;  
        text-decoration:line-through;  
        color: blue;  
    }  
</style> 

        html:

<body>  
    <h3>h3标题标签</h3>  
    <ul>  
        <li>  
            <ul>  
                <li>  
                    <ul>  
                        <li>  
                            <ul>  
                                <li><p>p段落标签</p></li>  
                            </ul>  
                        </li>  
                    </ul>  
                </li>  
            </ul>  
        </li>  
    </ul>  
    <p>p段落标签</p>  
</body>  

        运行结果：

分析：在这个示例当中，我们运用标签选择器分别针对<body>、<h3>以及<p>标签设定了各不相同的样式。

id 选择器

        在 CSS 中，“#” 乃是 id 选择器的独特标识符号。可在 HTML 标签中添加属性 “id”，从而为特定的标签赋予独一无二的标识符。id 的命名需以字母开头࿰

相关文章：

CSS 选择器的分类与使用要点一

目录 非 VIP 用户可前往公众号进行免费阅读 标签选择器 id 选择器 类选择器 介绍 公共类 CSS 中优先用 class 选择器，慎用 id 选择器 后代选择器 交集选择器 以标签名作为开头 以类名作为开头 连续交集 并集选择器（分组选择器） 通配符* 儿子选择器 >（IE7…...

编程日记 2024/9/22 16:36:27

无人机集群路径规划：麻雀搜索算法(Sparrow Search Algorithm, SSA)​求解无人机集群路径规划，提供MATLAB代码

一、单个无人机路径规划模型介绍 无人机三维路径规划是指在三维空间中为无人机规划一条合理的飞行路径&#xff0c;使其能够安全、高效地完成任务。路径规划是无人机自主飞行的关键技术之一&#xff0c;它可以通过算法和模型来确定无人机的航迹&#xff0c;以避开障碍物、优化…...

编程日记 2024/9/22 16:35:26

harbor集成trivy镜像扫描工具

harbor项目地址：GitHub - goharbor/harbor: An open source trusted cloud native registry project that stores, signs, and scans content. 前置条件：安装好docker和docker-compose 一、安装harbor 1、下载harbor安装包并解压 wget https://github.com/goharbor/harbo…...

编程日记 2024/9/22 16:30:21

DMA学习

一、DMA简介 DMA是一种无需CPU的参与就可以让外设与系统内存之间进行双向数据传输的硬件机制。使用DMA可以使系统CPU从实际的I/O数据传输过程中摆脱出来&#xff0c;从而大大提高系统的吞吐率。 DMA方式的数据传输由DMA控制器&#xff08;DMAC&#xff09;控制&#xff0c;在传…...

编程日记 2024/9/22 16:29:20

C语言18--头文件

头文件的作用 通常&#xff0c;一个常规的C语言程序会包含多个源码文件&#xff08;.c&#xff09;&#xff0c;当某些公共资源需要在各个源码文件中使用时&#xff0c;为了避免多次编写相同的代码&#xff0c;一般的做法是将这些大家都需要用到的公共资源放入头文件&#xff…...

编程日记 2024/9/22 16:28:19

vscode软件在 C发中常用插件

一. 简介 本文简单介绍一下&#xff0c;当做 C开发时 vscode软件常用的插件。 vscode软件是 微软公司目前提供的一款免费的开发软件&#xff0c;可以通过 vscode官网下载 vscode。 二. vscode软件在 C开发中常用插件 注意&#xff1a;vscode软件安装后&#xff0c;可以直接…...

编程日记 2024/9/22 16:26:17

【C++ Primer Plus习题】17.2

大家好,这里是国中之林! ❥前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。有兴趣的可以点点进去看看← 问题: 解答: #include <iostream> #include <fstream> using namesp…...

编程日记 2024/9/22 16:24:15

Vue Props传值

Props用于父组件向子组件传值 定义类型 // 定义一个接口,用来限制Teacher的属性 export interface Teacher {name: string;age: number;gender: string; }export type teacherList Teacher[];// 一个自定义类型 export type Teachers Array<Teacher>;父组件 <scr…...

编程日记 2024/9/22 16:22:13

FreeSWITCH event_socket 配置从其他地址连接

FreeSWITCH 默认配置只能 在本机连接, 要从 其他ip连接, 需要如下配置&#xff1a; 1、修改event_socket.conf.xml 1 <configuration name"event_socket.conf" description"Socket Client">2 <settings>3 <param name"nat-map&…...

编程日记 2024/9/22 16:21:12

信息安全数学基础（19）同余式的基本概念及一次同余式

一、同余式概念 同余式是数论中的一个基本概念&#xff0c;用于描述两个数在除以某个数时所得的余数相同的情况。具体地&#xff0c;设m是一个正整数&#xff0c;a和b是两个整数&#xff0c;如果a和b除以m的余数相同&#xff0c;则称a和b模m同余&#xff0c;记作a≡b(mod m)。反…...

编程日记 2024/9/22 16:19:11

网关过滤器：Spring Cloud Gateway

在Java中&#xff0c;实现网关过滤器&#xff08;Gateway Filter&#xff09;通常与Spring Cloud Gateway相关。Spring Cloud Gateway是一个基于Spring Framework 5、Project Reactor和Spring WebFlux构建的API网关&#xff0c;它为微服务架构提供了一种简单而有效的方式来路由…...

编程日记 2024/9/22 16:18:09

力扣最热一百题——除自身以外数组的乘积

目录 题目链接&#xff1a;238. 除自身以外数组的乘积 - 力扣&#xff08;LeetCode&#xff09; 题目描述 示例 提示&#xff1a; 解法一&#xff1a;左右数组&#xff08;小型动态规划&#xff09; 实现思路 Java写法&#xff1a; 运行时间 C写法&#xff1a; 运行时…...

编程日记 2024/9/22 16:13:03

监控易监测对象及指标之：全面监控SQL Server数据库

随着企业信息化建设的深入&#xff0c;数据库作为核心数据资产的管理中心&#xff0c;其性能和稳定性直接关系到业务的连续性和企业的运营效率。SQL Server作为一款功能强大、性能稳定的关系型数据库管理系统&#xff0c;广泛应用于各类业务场景中。 为了确保SQL Server数据库的…...

编程日记 2024/9/22 16:10:00

计算机视觉的应用34-基于CV领域的人脸关键点特征智能提取的技术方法

大家好&#xff0c;我是微学AI&#xff0c;今天给大家介绍一下计算机视觉的应用34-基于CV领域的人脸关键点特征智能提取的技术方法。本文主要探讨计算机视觉领域中人脸关键点特征智能提取的技术方法。详细介绍了基于卷积神经网络模型进行人脸关键点提取的过程&#xff0c;包括使…...

编程日记 2024/9/22 16:04:54

What is new in .NET 8 and C#12

目录 What is new in .NET 8? .NET Aspire Core .NET Libraries Metrics软件度量 Networking Extension Libraries Garbage Collection Reflection Improvements Native AOT Support NET SDK What is new in C# 12 ? Primary Constructors Collection Expressio…...

编程日记 2024/9/22 16:03:53

基于R语言的统计分析基础：使用键盘输入数据

在R语言中&#xff0c;键盘输入数据是一种灵活且直接的数据获取方式&#xff0c;适用于处理小数据集或需要即时用户交互的场景。通常用于交互式数据探索和分析、临时数据处理、交互式图形绘制、脚本自动化中的用户交互、特定应用场景下的数据录入中。 比如利用readline()函数根…...

编程日记 2024/9/22 16:01:52

unity3d入门教程九

unity3d入门教程九 20.2播放音频20.3在代码中播放21.1延时调用21.2invoke API21.3消息调用22.1交互界面22.2添加canvas22.3canavas的位置22.4添加text 这里给一个资源网站&#xff0c;可以部分免费下载&#xff0c;音乐和音效超多&#xff0c;支持检索 爱给网 https://www.aige…...

编程日记 2024/9/22 16:00:50

着色器 简介

着色器&#xff08;Shader&#xff09;是运行在 GPU 上的小程序。这些小程序为图形渲染管线的某个特定部分而运行。从基本意义上来说&#xff0c;着色器只是一种把输入转化为输出的程序。着色器也是一种非常独立的程序&#xff0c;因为它们之间不能相互通信&#xff1b;它们之间…...

编程日记 2024/9/22 15:58:48

redis单点、主从、哨兵、集群的不同

redis哨兵模式有几个&#xff1a; 单点主从哨兵集群 区别 主从模式&#xff1a;读写分离。 哨兵模式&#xff1a;哨兵模式是在主从模式的基础上添加了故障检测和自动故障转移的功能。还是读写分离。 哨兵节点负责监控主节点和从节点的状态&#xff0c;并在主节点宕机时选举新…...

编程日记 2024/9/22 15:57:46

notepad++的json查看

json文件查看 因为接触到3dtile模型&#xff0c;所以经常需要和json打交道&#xff0c;但是很多模型是下面这种情况&#xff0c;不好阅读&#xff0c;所以可以使用notepad的插件查看 正常打开是这样的 加载notepad插件 搜索json下载安装就可以了 如果网络抽象&#xff0c;下载…...

编程日记 2024/9/22 15:56:46

OpenClaw安全实践：GLM-4.7-Flash本地化部署的权限控制指南

OpenClaw安全实践&#xff1a;GLM-4.7-Flash本地化部署的权限控制指南 1. 为什么需要关注OpenClaw的权限控制&#xff1f; 去年夏天&#xff0c;我在整理电脑上的财务报告时&#xff0c;无意中发现OpenClaw自动将我的税务文件同步到了一个陌生目录。这个意外让我意识到——当…...

编程新知 2026/3/28 4:50:05

从一道经典OJ题出发：详解二叉树‘凹入表示法’的输出技巧与C++实现

从一道经典OJ题出发&#xff1a;详解二叉树‘凹入表示法’的输出技巧与C实现 1. 凹入表示法的独特魅力与实现挑战 在算法竞赛和数据结构面试中&#xff0c;二叉树的输出格式往往成为区分选手水平的关键细节。不同于常见的层序遍历或图形化展示&#xff0c;凹入表示法&#xff0…...

编程新知 2026/3/28 4:21:55

OpenClaw+Qwen3-VL:30B：个人多模态AI助手全流程

OpenClawQwen3-VL:30B&#xff1a;个人多模态AI助手全流程 1. 为什么选择这个组合&#xff1f; 去年冬天&#xff0c;我发现自己陷入了一个典型的知识工作者困境&#xff1a;每天要处理大量图片资料&#xff08;产品截图、会议白板照片、技术文档截图&#xff09;&#xff0c…...

编程新知 2026/3/28 4:09:52

ApiPost实战指南：从接口创建到自动化测试的全流程解析

1. 从零开始创建你的第一个API接口 作为一个常年和API打交道的开发者&#xff0c;我深知新手第一次接触接口工具时的迷茫。ApiPost作为一款国产的API开发工具&#xff0c;用起来确实比Postman更顺手&#xff0c;特别是对中文用户特别友好。下面我就带你一步步创建第一个接口&am…...

编程新知 2026/3/28 3:17:14

避坑指南：Cypress CYT4B的Mcal CAN配置，这5个参数配错直接通信失败

Cypress CYT4B的Mcal CAN配置实战&#xff1a;5个致命参数解析与避坑策略 实验室里&#xff0c;示波器上的CAN波形杂乱无章&#xff0c;工程师反复检查硬件连接却始终无法建立稳定通信——这可能是许多嵌入式开发者调试CYT4B系列芯片时的真实写照。当硬件排查无果后&#xff0c…...

编程新知 2026/3/28 3:03:12

Bitahub算力上新 RTX3080 10G重磅登场

针对当前 AI 开发与科研场景中算力成本高、配置复杂的痛点&#xff0c;Bitahub 平台推出了 RTX3080 10G 显卡算力服务。该显卡具备 10GB 显存&#xff0c;能够满足模型训练、推理等多场景算力需求&#xff0c;同时平台定价极具竞争力&#xff1a;单卡低至 0.82 元 / 小时&#…...

编程新知 2026/3/28 2:51:10

MybatisPlus分页插件PaginationInnerInterceptor原理解析与实战配置指南

MybatisPlus分页插件PaginationInnerInterceptor深度剖析与高效实践 当你在Spring Boot项目中处理海量数据时&#xff0c;分页查询就像给数据装上精准导航——而MybatisPlus的PaginationInnerInterceptor正是这个导航系统的核心引擎。不同于简单配置就能用的工具类&#xff0c;…...

编程新知 2026/3/28 2:12:26

从‘偏差-方差’到一行代码：用NumPy/PyTorch五步实现GAE，附PPO实战避坑点

从‘偏差-方差’到一行代码&#xff1a;用NumPy/PyTorch五步实现GAE&#xff0c;附PPO实战避坑点 强化学习中的策略优化常常面临一个核心挑战&#xff1a;如何准确评估动作的价值&#xff1f;广义优势估计&#xff08;GAE&#xff09;通过巧妙平衡偏差与方差&#xff0c;成为PP…...

编程新知 2026/3/28 1:21:40

FPGA调试避坑指南：Vivado ILA采样深度和探针位宽怎么设？资源占用与调试效果的平衡术

FPGA调试实战&#xff1a;ILA采样深度与探针位宽的黄金平衡法则 当你在Artix-7芯片上调试一个包含32位计数器和多状态机的设计时&#xff0c;突然发现ILA吃掉了一半的Block RAM资源&#xff0c;而采样深度却只够捕获5个时钟周期的数据——这种场景是否似曾相识&#xff1f;本文…...

编程新知 2026/3/28 0:29:27

YOLOv8目标检测新玩法：用VMamba替换C2f模块，我在DDSM医疗数据集上mAP涨到了0.724

YOLOv8与VMamba融合&#xff1a;医疗影像目标检测的突破实践 在医疗影像分析领域&#xff0c;目标检测技术正经历着从传统卷积神经网络到新型架构的转变。最近&#xff0c;我们将YOLOv8模型中的C2f模块替换为VMamba模块&#xff0c;在DDSM乳腺X光数据集上取得了mAP 0.724的显著…...

编程新知 2026/3/27 23:24:39