认识CSS之基础选择器
🌟所属专栏：前端只因变凤凰之路
🐔作者简介：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之基础选择器
🌟所属专栏：前端只因变凤凰之路🐔作者简介：rchjr——五带信管菜只因一枚😮前言：该系列将持续更新前端的相关学习笔记，欢迎和我一样的小白订阅，一起学习共同进步~👉文章简…...
JavaScript面试题整理汇总
1、面试官：说说JavaScript中的数据类型？存储上的差别？在JavaScript中，我们可以分成两种类型：基本类型和复杂类型。两种类型的区别是：存储位置不同基本类型主要为以下6种：NumberStringBooleanUnd…...
科普| 什么是云原生？
“新冠疫情从根本上改变了商业模式，工作流向在线迁移的速度比以往任何时候都要快。越来越多的公司和消费者依靠电子商务“ B2B”和B2C”，以及网上银行促进创新以满足日益增长的客户需求，云原生技术在其中发挥重要作用，同时也加速了…...
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. 实际开发中的…...
每日算法题
目录 第一题 第二题 第一题 题目描述 小蓝要为一条街的住户制作门牌号。 这条街一共有 20202020 位住户，门牌号从 11 到 20202020 编号。 小蓝制作门牌的方法是先制作 00 到 99 这几个数字字符，最后根据需要将字符粘贴到门牌上，例如门牌…...
xss靶场绕过
目录 第一关 原理 payload 第二关 原理 payload 第三关 原理 payload 第四关 原理 payload 第五关 原理 payload 第六关 原理 payload 第七关 原理 payload 第八关 原理 payload 第九关 原理 payload 第十关 原理 payload 第十一关 原理 payl…...
【数据结构】核心数据结构之二叉堆的原理及实现
1.大顶堆和小顶堆原理 什么是堆 堆（Heap）是计算机科学中一类特殊的数据结构，通常是一个可以被看作一颗完全二叉树的数组对象。 完全二叉树 只有最下面两层节点的度可以小于2，并且最下层的叶节点集中在靠左连续的边界 只允许最后…...
Spring Cloud Alibaba+saas企业架构技术选型+架构全景业务图 + 架构典型部署方案
基于Spring Cloud Alibaba 分布式微服务高并发数据平台化(中台)思想多租户saas设计的企业开发架构，支持源码二次开发、支持其他业务系统集成、集中式应用权限管理、支持拓展其他任意子项目。 一、架构技术选型 核心框架 Spring Boot SOA Spring Cloud …...
RocketMQ-03
1. 高级功能 1.1 消息存储 分布式队列因为有高可靠性的要求，所以数据要进行持久化存储。 消息生成者发送消息MQ收到消息，将消息进行持久化，在存储中新增一条记录返回ACK给生产者MQ push 消息给对应的消费者，然后等待消费者返回A…...
大神教你在 Linux 中查看你的时区
在这篇短文中，我们将向你简单介绍几种 Linux 下查看系统时区的简单方法。在 Linux 机器中，尤其是生产服务器上的时间管理技能，是在系统管理中一个极其重要的方面。Linux 包含多种可用的时间管理工具，比如 date 或 timedatectlcomm…...
Redis持久化策略
Redis有两种持久化方式：快照(snapshotting，或者叫Redis DataBase，RDB)和只追加文件(append-only,AOF)。两种方式可以单独使用，也可以同时使用。 1.RDB模式 RDB：将某时刻所有数据都写入到硬盘里，存储为.rdb快照文件，新的快照文件生成之后会替换旧的快照文件。用户可以将…...
显著性检验【t-test、方差分析、ks检验】
显著性检验【t-test、方差分析、ks检验】 0、目录 1显著性检验基本定义（what？） 2.使用显著性检验的意义（why? ） 3.显著性检验的具体操作流程（how? ） 1、显著性检验基本定义 统计假设检验…...
访问学者在德国访学生活衣食住行攻略
德国因其优质的教育水平、高价值的学制、低廉的访学成本，逐渐成为访学领域的宠儿。对于初次来到德国生活的访问学者，一定不是很熟悉德国的真实生活情况。今天51访学网小编就给大家介绍德国访学学衣食住行，希望可以帮助到即将出国的你。 一、…...
SQL-刷题技巧-删除重复记录
一. 原题呈现 牛客 SQL236. 删除emp_no重复的记录，只保留最小的id对应的记录。 描述： 删除emp_no重复的记录，只保留最小的id对应的记录。 drop table if exists titles_test; CREATE TABLE titles_test (id int(11) not null primary key…...
基于JSP的虚拟账号交易平台
技术：Java、JSP等摘要：随着网络游戏以及各种平台的出现与更新，虚拟账号交易平台正逐渐成为电商的新增长点。当今社会，互联网发发展飞速，游戏产业也渐渐兴起，随之虚拟游戏账号的交易量逐渐增多，但…...
LeetCode201_201. 数字范围按位与
LeetCode201_201. 数字范围按位与 一、描述 给你两个整数 left 和 right ，表示区间 [left, right] ，返回此区间内所有数字 按位与 的结果（包含 left 、right 端点）。 示例 1： 输入：left 5, right 7 输…...
一款好的风险管理软件可以做什么
风险管理软件哪个好？使用Zoho Projects易于使用的项目风险管理软件，最大限度地减少收入损失并快速调整您的投资组合，保护您的项目投资。Zoho Projects的高级风险管理软件可在您最需要的时候安全的保护您的业务。使用Zoho Projects强大的风险管…...
html2canvas使用文档
一、安装 Install NPM npm install --save html2canvasInstall Yarn yarn add html2canvas二、引入 import html2canvas from html2canvas;三、使用 以 vue 举例，这样写起来比较方便 <div ref"picture"><h4>Hello world!</h4> &l…...
HTML DOM 改变 CSS
HTML DOM 允许 JavaScript 改变 HTML 元素的样式。改变 HTML 样式如需改变 HTML 元素的样式，请使用这个语法：document.getElementById(id).style.propertynew style 下面的例子会改变 <p> 元素的样式：实例<html><body><…...
基于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外设的开发及…...
ssm+java2026年毕设司库管理系统【源码+论文】
本系统（程序源码）带文档lw万字以上 文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容一、选题背景关于企业理财与融资管理问题的研究，现有研究主要以大型企业ERP系统或通用财务管理软件为主，专门针对中…...
智能部署copaw：借助快马ai生成能理解自然语言的下载助手
最近在折腾一个叫copaw的工具时，发现手动下载部署特别麻烦，尤其是遇到网络波动和依赖冲突的时候。于是尝试用AI辅助开发的方式，通过自然语言描述需求，让InsCode(快马)平台的AI模型帮我生成一个智能化的下载部署助手。整个过程意外…...
制造业生产管理应用搭建指南：轻流无代码平台完整实施流程——生产效率提升 300% 方法论
制造业生产管理应用搭建指南：轻流无代码平台完整实施流程——生产效率提升 300% 方法论制造业生产管理应用搭建指南：轻流无代码平台完整实施流程——生产效率提升 300% 方法论引言：背景与重要性工信部《智能制造发展规划》明确提出࿰…...
突破VMware限制：在非苹果硬件上构建macOS开发环境完全指南
突破VMware限制：在非苹果硬件上构建macOS开发环境完全指南 【免费下载链接】unlocker 项目地址: https://gitcode.com/gh_mirrors/unloc/unlocker 实现跨平台macOS体验：VMware Unlocker核心价值解析 当开发者需要在Windows或Linux工作站上构建m…...
s2-pro快速上手指南：3步完成文本转语音与音色迁移实操手册
s2-pro快速上手指南：3步完成文本转语音与音色迁移实操手册 1. 平台简介 s2-pro是Fish Audio开源的专业级语音合成模型镜像，它能够将文本内容转换为自然流畅的语音，并支持通过参考音频实现音色迁移功能。这意味着你可以上传一段参考音频&…...
无需编程！用OFA模型快速搭建图文匹配工具：上传即测，结果秒出
无需编程！用OFA模型快速搭建图文匹配工具：上传即测，结果秒出 1. 图文匹配的痛点与解决方案 你有没有遇到过这样的困扰？在网上购物时，商品图片和描述对不上；浏览社交媒体时，配图与文字内容完全…...
SmartBMS：革新性开源智能电池管理系统技术解析
SmartBMS：革新性开源智能电池管理系统技术解析 【免费下载链接】SmartBMS Open source Smart Battery Management System 项目地址: https://gitcode.com/gh_mirrors/smar/SmartBMS 破解锂电池管理行业痛点：从安全隐患到性能瓶颈 在新能源技术飞…...
【手把手】FFmpeg音视频开发从入门到实战：一文吃透音视频同步原理与代码实现（附完整源码）
文章目录第一章 基础必懂：音视频开发的核心概念与FFmpeg框架1.1 别再被封装格式忽悠：MP4、MKV、AVI到底差在哪？1.2 搞懂解码流程：FFmpeg处理音视频的4个核心结构体第二章 深入原理：音视频同步的核心机制2.1 播放器卡顿…...
【仿真】Carla跨平台部署指南：从零到一，附ROS2与Autoware.auto连接实战
1. Carla仿真平台概述 Carla是一款开源的自动驾驶仿真平台，基于虚幻引擎构建，能够提供高度逼真的城市环境和交通场景。我第一次接触Carla是在2018年，当时它还处于早期开发阶段，但已经展现出惊人的潜力。经过多年发展，现…...
Mermaid在线编辑器：开源可视化工具的图表创作革命
Mermaid在线编辑器：开源可视化工具的图表创作革命 【免费下载链接】mermaid-live-editor Edit, preview and share mermaid charts/diagrams. New implementation of the live editor. 项目地址: https://gitcode.com/GitHub_Trending/me/mermaid-live-editor …...