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

认识CSS之基础选择器

news 2025/11/2 17:10:59
🌟所属专栏：前端只因变凤凰之路
🐔作者简介：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

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统，利用大模型实现智能 UI 自动化，结合计算机视觉和自然语言处理技术，实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

编程新知 2025/10/22 11:16:20

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

编程新知 2025/10/6 20:49:11

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异&#xff0c;它们的数据同步要求既要保持数据的准确性和一致性&#xff0c;又要处理好性能问题。以下是一些主要的技术要点&#xff1a; 数据结构差异 数据类型差异&#xff…...

编程新知 2025/8/12 3:03:43

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件 路径&#xff1a;src/utils/timer.ts 完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

编程新知 2025/8/9 0:31:20

Linux-07 ubuntu 的 chrome 启动不了

文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了&#xff0c;报错如下四、启动不了&#xff0c;解决如下 总结 问题原因 在应用中可以看到chrome&#xff0c;但是打不开(说明&#xff1a;原来的ubuntu系统出问题了&#xff0c;这个是备用的硬盘&a…...

编程新知 2025/10/29 5:03:52

C++ 求圆面积的程序（Program to find area of a circle）

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

编程新知 2025/10/29 6:13:18

DeepSeek 技术赋能无人农场协同作业：用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

编程新知 2025/9/24 13:35:36

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...

编程新知 2025/10/31 19:40:25

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

编程新知 2025/11/1 22:17:49

C++使用 new 来创建动态数组

问题&#xff1a; 不能使用变量定义数组大小 原因&#xff1a; 这是因为数组在内存中是连续存储的&#xff0c;编译器需要在编译阶段就确定数组的大小&#xff0c;以便正确地分配内存空间。如果允许使用变量来定义数组的大小&#xff0c;那么编译器就无法在编译时确定数组的大…...

编程新知 2025/10/24 15:10:51