CSS基础选择器，你认识多少？
前言
在上一文初识CSS中，我们了解到了其格式：选择器+{ }
在初步尝试使用时，我们笼统的直接输入了p { }以选择p标签来对其操作，而这一章节里，我们再进一步探索有关基础选择器的相关内容，理解选择器的作用。
选择器分类
标签选择器
类选择器
id选择器
通配符选择器
标签选择器
结构： 标签名 {css属性名：属性值；}
作用：通过标签名，找到页面中所有这类标签，设置样式
特点：选择的是一类标签，而不是单独一个，且标签选择器无论嵌套关系有多深，都能找到对应的标签
类选择器
结构：.类名{css属性名： 属性值；}
作用:通过类名，找到页面中所有带有这个类名的标签，设置样式
特点：
1.所有标签上都有class属性，class属性的属性值称为类名 (类似于名字）
2.类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头一个
3.标签可以同时有多个类名，类名之间以空格隔开
4.类名可以重复，一个类选择器可以同时选中多个标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.one {color: red;font-size: 30px;}.two {color: green;}</style>
</head>
<body><p class="one">这是一个p标签</p><div class="two">这是第二个标签</div>
</body>
</html>
效果图
我们看到特点第三点，比较有意思的是，一个标签可以拥有多个类名，看到上面的代码，我们是不是设置了两个类选择器，一个one，一个two，此时我们更改一下标签里的类别，发现div中对应的两个css都触发了，字体变成了30px大小，同时也变成了绿色
效果图：
id选择器
结构: #id属性值{css属性名: 属性值;}
作用:通过id属性值，找到页面中带有这个id属性值的标签，设置样式
特点：
1.所有标签上都有id属性
2.id属性值类似于身份证号码，在一个页面中是唯一的，不可重复
3.一个标签上只能有一个id属性值
4.一个id选择器只能选中一个标签
通配符选择器
结构: *{css属性名: 属性值;}
作用:找到页面中所有的标签，设置样式
特点
1.开发中使用极少，只会在极特殊情况下才会用到
2.在基础班小页面中可能会用于去除标签默认的margin和padding
特点二中描述的两个名称是内外边距，我们之后可以通过通配符选择器把所有标签的内外间距去掉
* {margin: 0;padding: 0;}去除前
去除后
相关文章：
CSS基础选择器，你认识多少？
前言在上一文初识CSS中，我们了解到了其格式：选择器{ }在初步尝试使用时，我们笼统的直接输入了p { }以选择p标签来对其操作，而这一章节里，我们再进一步探索有关基础选择器的相关内容，理解选择器的作用。选择…...
ChatGPT入门案例｜商务智能对话客服（三）
本篇介绍智能客服的基本功能架构和基本概念，并利用对话流技术构建商务智能应用。 01、商务智能客服功能结构 互联网的发展已经深入到社会的各个方面，智能化发展已经成为社会发展的大趋势。在大数据和互联网时代，企业和组织愈加重视客户沟通…...
Matlab 最小二乘法拟合平面（SVD）
文章目录 一、简介1.1最小二乘法拟合平面1.2 SVD角度二、实现代码三、实现效果参考资料一、简介 1.1最小二乘法拟合平面 之前我们使用过最为经典的方式对平面进行了最小二乘拟合（点云最小二乘法拟合平面），其推导过程如下所示： 仔细观察一下可以发现...
AtCoder Regular Contest 126 D题题解
思路 首先我们看看假设选中 mmm 个数后的答案。 我们首先现将 mmm 个数移动到一起，在将他们重新排序。 我们知道，mmm 个数移在一起时，当位于中间的那个数不动时交换次数最少，于是可以列出式子（cic_ici 是点 iii 的…...
Android R WiFi热点流程浅析
Android R WiFi热点流程浅析 Android上的WiFi SoftAp功能是用户常用的功能之一，它能让我们分享手机的网络给其他设备使用。 那Android系统是如何实现SoftAp的呢，这里在FWK层面做一个简要的流程分析，供自己记录和大家参考。 以Android R版本为…...
【C++进阶】二、多态详解（总）
目录 一、多态的概念 二、多态的定义及实现 2.1 多态的构成条件 2.2 虚函数 2.3 虚函数的重写 2.4 虚函数重写的两个例外 2.4.1 协变 2.4.2 析构函数的重写 2.5 C11 override 和 final 2.5.1 final 2.5.2 override 2.6 重载、覆盖(重写)、隐藏(重定义)的对比 三、…...
node-sass@4.14.1 包含风险， 如何升级依赖至 dart-sass
文章目录需求我上网都查到了哪些信息在 github 看到了 node-sass 依赖的最新版本的列表：关于方案2的失败不同版本的 nodejs 和 node-sass依赖的**适配关系**从何得知替代方案——dart-sass如何安装 dart sass？需求 在做一个基于Node、React的前端项目&a…...
DataWhale 大数据处理技术组队学习task2
三、Hadoop分布式文件系统 1. 产生背景 数据量越来越大，一台独立的计算机已经无法存储所有的数据---->将大规模的数据存储到成百上千的计算机中------为了解决数据管理以及维护极其繁琐与低效------>分布式文件系统 分布式文件系统是管理网络中跨多台计算机…...
一文读懂select、poll、epoll的用法
select，poll，epoll都是IO多路复用的机制。I/O多路复用就通过一种机制，可以监视多个描述符，一旦某个描述符就绪（一般是读就绪或者写就绪），能够通知程序进行相应的读写操作。但select，…...
《C陷阱与缺陷》----词法“陷阱”
导言： 由于一个程序错误可以从不同层面采用不同方式进行考察，而根据程序错误与考察程序的方式之间的相关性，可以将程序错误进行划分为各种陷阱与缺陷： ①.词法“陷阱” ②.语法“陷阱” ③.语义“陷阱” ④.连接问题 ⑤.库函数问…...
千锋教育+计算机四级网络-计算机网络学习-04
UDP概述 UDP协议 面向无连接的用户数据报协议，在传输数据前不需要先建立连接；目地主机的运输层收到UDP报文后，不需要给出任何确认 UDP特点 相比TCP速度稍快些简单的请求/应答应用程序可以使用UDP对于海量数据传输不应该使用UDP广播和多播应用…...
蓝桥杯算法训练合集十四 1.P08052.P07053.同余方程4.P08015.ascii应用
目录 1.P0805 2.P0705 3.同余方程 4.P0801 5.ascii应用 1.P0805 问题描述 当两个比较大的整数相乘时，可能会出现数据溢出的情形。为避免溢出，可以采用字符串的方法来实现两个大数之间的乘法。具体来说，首先以字符串的形式输入两个整数&…...
判断字符串中的字符的类型isdecimal()；isalpha()；isdigit()；isalnum()
【小白从小学Python、C、Java】 【计算机等级考试500强双证书】 【Python-数据分析】 判断字符串中的字符的类型 isdecimal()；isalpha()；isdigit()；isalnum() [太阳]选择题 对于代码中isdecimal()和isalnum()输出的结果是? s "ABc123&…...
VSCode远程调试Linux代码，python解释器配置
安装插件并配置 安装后找到插件图标，点击 点击SSH上的 号 在弹出框中输入命令：ssh usernameip -p port username: 远程服务器的用户名 ip： 远程ip port：端口号，没有可以不用 输入完毕后点击enter 选择ssh配置文件保存…...
03：入门篇 - CTK Plugin Framework 基本原理
作者： 一去、二三里 个人微信号： iwaleon 微信公众号： 高效程序员 CTK Plugin Framework 技术是面向 C++ 的动态模型系统。该系统允许插件之间的松散耦合，并且提供了设计良好的方式来进行功能和数据的交互。此外，它没有预先对插件施加限制，这样就可以很容易地将插件的相关…...
面试攻略，Java 基础面试 100 问（九）
数组有没有 length()方法?String 有没有 length()方法？ 数组没有 length()方法，有 length 的属性。String 有 length()方法。JavaScript 中，获得字符串的长度是通过 length 属性得到的，这一点容易和 Java混淆。 在 Java 中&…...
JavaScript 代码不嵌套主义
文章目录前言一、何为嵌套代码二、避免嵌套1.提炼抽取2.反转排列总结前言 看过不少过度嵌套的代码, 我真正意识到问题的严重性是刚入职那会, 我在一个老项目里看到了40个连续的else if, 套了6层的if, for和forEach, 因为我们并没有做什么限制代码嵌套的提前约定. 呃, 那之后认…...
使用默认参数的4大要点
概述 默认参数是C中新增的特性。在C中，可以为函数的参数指定默认值。调用函数时，如果没有指定实参，则自动使用默认参数。默认参数的基本语法这里就不作介绍了，下面重点介绍使用默认参数的一些知识要点。 基本规则 1、当函数中某个…...
Linux文件系统中的硬链接及常见面试题
如果能对inode的概念有所了解，对理解本文会有所帮助。如果对inode的概念不太清楚也没有关系，我们会捎带介绍一下。在文件系统的实现层面，我们可以认为包含两个组件：一个是包含数据块的池子，池子中的数据块是等大小的&a…...
opencv-StereoBM算法
原理解释目前立体匹配算法是计算机视觉中的一个难点和热点，算法很多，但是一般的步骤是：A、匹配代价计算匹配代价计算是整个立体匹配算法的基础，实际是对不同视差下进行灰度相似性测量。常见的方法有灰度差的平方SD（squ…...
Flask RESTful 示例
目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题： 下面创建一个简单的Flask RESTful API示例。首先，我们需要创建环境，安装必要的依赖，然后…...
React Native 导航系统实战（React Navigation）
导航系统实战（React Navigation） React Navigation 是 React Native 应用中最常用的导航库之一，它提供了多种导航模式，如堆栈导航（Stack Navigator）、标签导航（Tab Navigator）和抽屉…...
C# 类和继承(抽象类)
抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...
基于 TAPD 进行项目管理
起因 自己写了个小工具，仓库用的Github。之前在用markdown进行需求管理，现在随着功能的增加，感觉有点难以管理了，所以用TAPD这个工具进行需求、Bug管理。 操作流程 注册 TAPD，需要提供一个企业名新建一个项目&#…...
深入浅出深度学习基础：从感知机到全连接神经网络的核心原理与应用
文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么？1.1.2 感知机的工作原理 1.2 感知机的简单应用：基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...
Web中间件--tomcat学习
Web中间件–tomcat Java虚拟机详解 什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机，它可以执行Java字节码。Java虚拟机是Java平台的一部分，Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...
消息队列系统设计与实践全解析
文章目录 🚀 消息队列系统设计与实践全解析🔍 一、消息队列选型1.1 业务场景匹配矩阵1.2 吞吐量/延迟/可靠性权衡💡 权衡决策框架 1.3 运维复杂度评估🔧 运维成本降低策略 🏗️ 二、典型架构设计2.1 分布式事务最终一致…...
热烈祝贺埃文科技正式加入可信数据空间发展联盟
2025年4月29日，在福州举办的第八届数字中国建设峰会“可信数据空间分论坛”上，可信数据空间发展联盟正式宣告成立。国家数据局党组书记、局长刘烈宏出席并致辞，强调该联盟是推进全国一体化数据市场建设的关键抓手。 郑州埃文科技有限公司&am…...
es6+和css3新增的特性有哪些
一：ECMAScript 新特性（ES6） ES6 (2015) - 革命性更新 1，记住的方法，从一个方法里面用到了哪些技术 1，let /const块级作用域声明2，**默认参数**：函数参数可以设置默认值。3&#x…...
在 Visual Studio Code 中使用驭码 CodeRider 提升开发效率：以冒泡排序为例
目录 前言1 插件安装与配置1.1 安装驭码 CodeRider1.2 初始配置建议 2 示例代码：冒泡排序3 驭码 CodeRider 功能详解3.1 功能概览3.2 代码解释功能3.3 自动注释生成3.4 逻辑修改功能3.5 单元测试自动生成3.6 代码优化建议 4 驭码的实际应用建议5 常见问题与解决建议…...