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

认识CSS之基础选择器

news 2026/2/2 20:18:20
🌟所属专栏：前端只因变凤凰之路
🐔作者简介：rchjr——五带信管菜只因一枚
😮前言：该系列将持续更新前端的相关学习笔记，欢迎和我一样的小白订阅，一起学习共同进步~
👉文章简介：本文介绍CSS概念，语法规范，代码风格等等，作为CSS入门必备知识。知识学习内容来自b站的@黑马程序员的视频

😃0 什么是CSS

名称：CSS是层叠样式表的简称，别称是CSS样式表或者级联样式表。

使用场景

美化网页，布局网页。具体就是设置HTML中的文本内容（字体，大小，对齐方式等）、图片外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。

作用：让HTML专注结构呈现，使得结构和样式分离。

语法规则

CSS语法由两部分组成：选择器和一条或多条声明（键值对形式，属性是对象设置的样式属性，如字体的大小，文本的颜色等。两者用英文":"分割，多个声明用英文";"分割）

<!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>/* 选择器 {样式} */p {color: red;font-size: 12px;}</style>
</head>
<body><p>有点意思</p>
</body>
</html>

代码风格

1）样式风格书写

紧凑型

<style>/* 选择器 {样式} */p {color: red;font-size: 12px;}</style>

展开型（强烈推荐）

<style>/* 选择器 {样式} */p {color: red;font-size: 12px;}</style>

2）样式大小写风格

一般都推荐小写字母，全部用小写

3）样式空格风格

属性值前面，冒号后面保留一个空格；选择器和大括号中间保留空格

😃1 CSS基础选择器

作用

选择器就是根据不同需求把不同的标签选出来，即选择标签。具体看以下例子：

把div里面的文字改成红色
把第一个div里面的文字改成红色
把ul里的li标签的文字改成红色

分类

选择器分为基础选择器和复合选择器

基础选择器

标签选择器

是指用html标签名称作为选择器，为页面中某一类标签指定统一的CSS样式。

语法
标签名 {
属性: 属性值;
属性: 属性值;
属性: 属性值;
......
}
<!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>p {color: green;}div {color: pink;}</style>
</head>
<body><p>男生</p><p>男生</p><p>男生</p><div>女生</div><div>女生</div><div>女生</div>
</body>
</html>

优点：把某一类标签全部选择出来

缺点：不能个性化设计

类选择器

用于单独选一个或某几个标签

语法：
.类名 {
属性1: 属性值1;
......
}
标签中使用class属性调用对应的类
<!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>.red {color: red;font-size: 12px;}</style>
</head>
<body><ul><li class="red">喜洋洋</li><li>美羊羊</li><li class="red">懒羊羊</li><li>慢羊羊</li></ul><div class="red">我是迪迦</div>
</body>
</html>

注意

类名不要用已经存在的标签名称（div，p等等），自己取名字

名字过长用-短横线连接

一些常用命名规则

头：header
内容：content；container
导航：nav
页面主体：main
菜单：menu
<!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>.red {width: 100px;height: 100px;/* 背景颜色 */background-color: red;}.green {width: 100px;height: 100px;background-color: green;}</style>
</head>
<body><div class="red">红色</div><div class="green">绿色</div><div class="red">红色</div>
</body>
</html>

多类名

给一个标签指定多个类名，从而达到更多的选择目的，这些类名都可以选出这个标签

使用方式：在类属性中用空格隔开多个类名

使用场景：方便统一修改，如果有多个属性值一样，就可以提取出作为一个单独的类

<!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>.box {width: 100px;height: 100px;}.red {/* 背景颜色 */background-color: red;}.green {background-color: green;}</style>
</head>
<body><div class="box red">红色</div><div class="box green">绿色</div><div class="box red">红色</div>
</body>
</html>
id选择器

为特有id的html元素指定样式

语法：
#id名 {
属性：属性值;
}

与类选择器的区别：只能调用一次，其他标签无法调用。经常和js搭配使用。类选择器在修改样式中使用的最多。

通配符选择器
语法：
* {
属性：属性值;
}

把HTML页面中所有元素（标签）进行修改；并且不需要调用，会自动使用。在特殊情况（后面进一步学习后）使用

基础选择器总结

基础选择器

作用

特点

使用情况

用法

标签选择器

选出某一类所用标签

不能差异化选择

较多

p {color: red;}

类选择器

可以选出1个或多个不同类型的标签

可以根据需求选择

非常多

.nav {color: red;}

id选择器

一次只能选择一个标签

在一个HTML页面中只能出现一次

一般和js搭配使用

#nav {color: red;}

通配符选择器

选择所有标签

选择的太多

特殊情况使用

相关文章：

认识CSS之基础选择器

&#x1f31f;所属专栏&#xff1a;前端只因变凤凰之路&#x1f414;作者简介&#xff1a;rchjr——五带信管菜只因一枚&#x1f62e;前言&#xff1a;该系列将持续更新前端的相关学习笔记&#xff0c;欢迎和我一样的小白订阅&#xff0c;一起学习共同进步~&#x1f449;文章简…...

编程日记 2023/5/7 2:52:42

JavaScript面试题整理汇总

1、面试官&#xff1a;说说JavaScript中的数据类型&#xff1f;存储上的差别&#xff1f;在JavaScript中&#xff0c;我们可以分成两种类型&#xff1a;基本类型和复杂类型。两种类型的区别是&#xff1a;存储位置不同基本类型主要为以下6种&#xff1a;NumberStringBooleanUnd…...

编程日记 2023/5/7 2:52:40

科普| 什么是云原生？

“新冠疫情从根本上改变了商业模式&#xff0c;工作流向在线迁移的速度比以往任何时候都要快。越来越多的公司和消费者依靠电子商务“ B2B”和B2C”&#xff0c;以及网上银行促进创新以满足日益增长的客户需求&#xff0c;云原生技术在其中发挥重要作用&#xff0c;同时也加速了…...

编程日记 2023/5/6 11:35:42

Spring Boot 3.0系列【9】核心特性篇之依赖管理

有道无术，术尚可求，有术无道，止于术。 本系列Spring Boot版本3.0.3 源码地址：https://gitee.com/pearl-organization/study-spring-boot3 文章目录 前言依赖管理1. dependencyManagement、parent2. spring-boot-starter-parent3. spring-boot-dependencies4. 实际开发中的…...

编程日记 2023/5/7 2:52:38

每日算法题

目录 第一题 第二题 第一题 题目描述 小蓝要为一条街的住户制作门牌号。 这条街一共有 20202020 位住户&#xff0c;门牌号从 11 到 20202020 编号。 小蓝制作门牌的方法是先制作 00 到 99 这几个数字字符&#xff0c;最后根据需要将字符粘贴到门牌上&#xff0c;例如门牌…...

编程日记 2023/5/6 11:35:40

xss靶场绕过

目录 第一关 原理 payload 第二关 原理 payload 第三关 原理 payload 第四关 原理 payload 第五关 原理 payload 第六关 原理 payload 第七关 原理 payload 第八关 原理 payload 第九关 原理 payload 第十关 原理 payload 第十一关 原理 payl…...

编程日记 2023/5/6 17:42:53

【数据结构】核心数据结构之二叉堆的原理及实现

1.大顶堆和小顶堆原理 什么是堆 堆&#xff08;Heap&#xff09;是计算机科学中一类特殊的数据结构&#xff0c;通常是一个可以被看作一颗完全二叉树的数组对象。 完全二叉树 只有最下面两层节点的度可以小于2&#xff0c;并且最下层的叶节点集中在靠左连续的边界 只允许最后…...

编程日记 2023/5/6 17:42:51

Spring Cloud Alibaba+saas企业架构技术选型+架构全景业务图 + 架构典型部署方案

基于Spring Cloud Alibaba 分布式微服务高并发数据平台化(中台)思想多租户saas设计的企业开发架构&#xff0c;支持源码二次开发、支持其他业务系统集成、集中式应用权限管理、支持拓展其他任意子项目。 一、架构技术选型 核心框架 Spring Boot SOA Spring Cloud …...

编程日记 2023/5/6 17:42:48

RocketMQ-03

1. 高级功能 1.1 消息存储 分布式队列因为有高可靠性的要求&#xff0c;所以数据要进行持久化存储。 消息生成者发送消息MQ收到消息&#xff0c;将消息进行持久化&#xff0c;在存储中新增一条记录返回ACK给生产者MQ push 消息给对应的消费者&#xff0c;然后等待消费者返回A…...

编程日记 2023/5/6 17:42:46

大神教你在 Linux 中查看你的时区

在这篇短文中&#xff0c;我们将向你简单介绍几种 Linux 下查看系统时区的简单方法。在 Linux 机器中&#xff0c;尤其是生产服务器上的时间管理技能&#xff0c;是在系统管理中一个极其重要的方面。Linux 包含多种可用的时间管理工具&#xff0c;比如 date 或 timedatectlcomm…...

编程日记 2023/5/6 17:42:43

Redis持久化策略

Redis有两种持久化方式：快照(snapshotting，或者叫Redis DataBase，RDB)和只追加文件(append-only,AOF)。两种方式可以单独使用，也可以同时使用。 1.RDB模式 RDB：将某时刻所有数据都写入到硬盘里，存储为.rdb快照文件，新的快照文件生成之后会替换旧的快照文件。用户可以将…...

编程日记 2023/5/5 19:47:44

显著性检验【t-test、方差分析、ks检验】

显著性检验【t-test、方差分析、ks检验】 0、目录 1显著性检验基本定义&#xff08;what&#xff1f;&#xff09; 2.使用显著性检验的意义&#xff08;why? &#xff09; 3.显著性检验的具体操作流程&#xff08;how? &#xff09; 1、显著性检验基本定义 统计假设检验…...

编程日记 2023/5/6 17:42:41

访问学者在德国访学生活衣食住行攻略

德国因其优质的教育水平、高价值的学制、低廉的访学成本&#xff0c;逐渐成为访学领域的宠儿。对于初次来到德国生活的访问学者&#xff0c;一定不是很熟悉德国的真实生活情况。今天51访学网小编就给大家介绍德国访学学衣食住行&#xff0c;希望可以帮助到即将出国的你。 一、…...

编程日记 2023/5/6 17:42:38

SQL-刷题技巧-删除重复记录

一. 原题呈现 牛客 SQL236. 删除emp_no重复的记录&#xff0c;只保留最小的id对应的记录。 描述&#xff1a; 删除emp_no重复的记录&#xff0c;只保留最小的id对应的记录。 drop table if exists titles_test; CREATE TABLE titles_test (id int(11) not null primary key…...

编程日记 2023/5/6 17:42:33

基于JSP的虚拟账号交易平台

技术&#xff1a;Java、JSP等摘要&#xff1a;随着网络游戏以及各种平台的出现与更新&#xff0c;虚拟账号交易平台正逐渐成为电商的新增长点。当今社会&#xff0c;互联网发发展飞速&#xff0c;游戏产业也渐渐兴起&#xff0c;随之虚拟游戏账号的交易量逐渐增多&#xff0c;但…...

编程日记 2023/5/6 17:42:31

LeetCode201_201. 数字范围按位与

LeetCode201_201. 数字范围按位与 一、描述 给你两个整数 left 和 right &#xff0c;表示区间 [left, right] &#xff0c;返回此区间内所有数字 按位与 的结果&#xff08;包含 left 、right 端点&#xff09;。 示例 1&#xff1a; 输入&#xff1a;left 5, right 7 输…...

编程日记 2023/5/6 17:42:28

一款好的风险管理软件可以做什么

风险管理软件哪个好&#xff1f;使用Zoho Projects易于使用的项目风险管理软件&#xff0c;最大限度地减少收入损失并快速调整您的投资组合&#xff0c;保护您的项目投资。Zoho Projects的高级风险管理软件可在您最需要的时候安全的保护您的业务。使用Zoho Projects强大的风险管…...

编程日记 2023/5/6 17:42:26

html2canvas使用文档

一、安装 Install NPM npm install --save html2canvasInstall Yarn yarn add html2canvas二、引入 import html2canvas from html2canvas;三、使用 以 vue 举例&#xff0c;这样写起来比较方便 <div ref"picture"><h4>Hello world!</h4> &l…...

编程日记 2023/5/6 17:42:21

HTML DOM 改变 CSS

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。改变 HTML 样式如需改变 HTML 元素的样式&#xff0c;请使用这个语法&#xff1a;document.getElementById(id).style.propertynew style 下面的例子会改变 <p> 元素的样式&#xff1a;实例<html><body><…...

编程日记 2023/5/6 17:42:18

基于EB工具的TC3xx_MCAL配置开发01_WDG模块配置介绍

目录 1.概述2. WDG 配置2.1 General部分配置2.2 WdgSettingsConfig配置2.2.1 配置概述2.2.2 CPU WDG具体配置2.3 WdgDemEventParameterRefs3. WDG配置注意事项1.概述 本篇开始我们基于EB Tresos工具对英飞凌TC3xx系列MCU的MCAL开发进行介绍，结合项目经验对各MCAL外设的开发及…...

编程日记 2023/5/6 17:42:16

css实现圆环展示百分比，根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

编程新知 2026/1/26 22:27:53

.Net框架，除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

编程新知 2026/2/1 19:26:16

【网络安全产品大调研系列】2. 体验漏洞扫描

前言 2023 年漏洞扫描服务市场规模预计为 3.06&#xff08;十亿美元&#xff09;。漏洞扫描服务市场行业预计将从 2024 年的 3.48&#xff08;十亿美元&#xff09;增长到 2032 年的 9.54&#xff08;十亿美元&#xff09;。预测期内漏洞扫描服务市场 CAGR&#xff08;增长率&…...

编程新知 2026/1/24 8:25:30

Linux相关概念和易错知识点（42）（TCP的连接管理、可靠性、面临复杂网络的处理）

目录 1.TCP的连接管理机制&#xff08;1&#xff09;三次握手①握手过程②对握手过程的理解 &#xff08;2&#xff09;四次挥手&#xff08;3&#xff09;握手和挥手的触发&#xff08;4&#xff09;状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...

编程新知 2026/1/30 0:09:51

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

编程新知 2026/1/24 7:56:15

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

编程新知 2026/2/1 13:28:03

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2（Navigation2）的行为树框架中，行为树节点插件按照功能分为 Action（动作节点）、Condition（条件节点）、Control（控制节点） 和 Decorator（装饰节点） 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务，直接与硬件、传感器或外部系统…...

编程新知 2026/1/29 4:00:56

高危文件识别的常用算法：原理、应用与企业场景

高危文件识别的常用算法&#xff1a;原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件&#xff0c;如包含恶意代码、敏感数据或欺诈内容的文档&#xff0c;在企业协同办公环境中&#xff08;如Teams、Google Workspace&#xff09;尤为重要。结合大模型技术&…...

编程新知 2026/1/31 6:09:20

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测；从基础到高级，涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

编程新知 2025/9/12 15:10:44

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域&#xff0c;高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表&#xff0c;以及基于它们实现的 Reactor 模式&#xff0c;为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。​ 一、I…...

编程新知 2026/2/2 2:19:38