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

【CSS—前端快速入门】CSS 选择器

news 2026/5/19 17:31:09

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

CSS

1. CSS介绍

1.1 什么是CSS?

CSS(Cascading Style Sheet)，层叠样式表，用于控制页面的样式；

CSS 能够对网页中元素位置的排版进行像素级精确控制，实现美化页面的效果；能够做到页面的样式和
结构分离；

在这里插入图片描述

1.2 基本语法规范

选择器 +{一条/N条声明}

  • 选择器决定针对谁修改(找谁)
  • 声明决定修改啥(干啥)
  • 声明的属性是键值对
  • 使用:区分键值对,使用:区分键和值.
<style>p{/*设置字体颜色 */color: red;/*设置字体大小 */font-size: 30px;
}
</style><p>hello</p>

注意:

  • CSS 要写到 style标签中 (后面还会介绍其他写法)
  • style 标签可以放到页面任意位置，一般放到 head 标签内.
  • CSS 使用 /**/作为注释 (使用 ctrl +/快速切换).

在这里插入图片描述

保存代码，查看页面：在这里插入图片描述

在这里插入图片描述

1.3 引入方式

行内样式

在这里插入图片描述

内部样式

在这里插入图片描述

在这里插入图片描述

外部样式

在这里插入图片描述

我们再创建一个新文件，用于写入选择器，然后在原文件的 head 内通过上述语法引入新文件的信息：
在这里插入图片描述

在这里插入图片描述

写好后，保存两个文件，重新打开页面：

在这里插入图片描述

值得一提，选择器的生效优先级遵从就近原则；

1.4 规范

样式大小写

  • 虽然 CSS 不区分大小写，我们开发时统一使用小写字母

空格规范

  • 冒号后面带空格
  • 选择器 和 { 之间也有一个空格.

2. CSS选择器

在这里插入图片描述

标签选择器

/*选择所有的a标签，设置颜色为红色/a{color: red;
}/*选择所有的div标签，设置颜色为绿色*/div {color: green;
}

在这里插入图片描述
保存代码，打开页面：

在这里插入图片描述

要修改 div3 的颜色，我们可以设置 a { } 选择器，来选择所有 a 标签，并设置颜色：

在这里插入图片描述

在这里插入图片描述

类选择器

class 选择器的概念和规范使用如下：

  • 可以为每一个标签都添加 class 属性
  • class 的值不要求唯一
  • 在使用class 选择器时，需要在 class 选择器前加一个 . ，如 .class 名{ }

在这里插入图片描述

保存代码，打开页面：

在这里插入图片描述

ID 选择器

ID 的概念和规范使用如下：

  • 一个页面中的 ID 值原则性上要求是唯一的

  • 可以为每个标签都设置 ID

  • 可以为 ID 赋任何值，哪怕是标签名（ div , span , title…)

  • 在使用 ID 选择器时，需要在 ID 选择器前加一个 # ，如 # id 名{ }，避免 ID 是标签名的时候，编译器误以为使用的是标签选择器

在这里插入图片描述

保存代码后，打开页面：

在这里插入图片描述

通配符选择器

通配符的概念和通配符选择器的使用如下：

  • 通配符：*，表示选择所有，如SQL 中的 select* ；

  • 通配符选择器的使用： *{ }，表示选择当前页面的所有元素；

  • 通配符选择器的优先级较前面几种选择器，优先级是比较低的；

在这里插入图片描述

保存代码，打开页面：

在这里插入图片描述

复合选择器

复合选择器，是由多个单选择器组成的多选择器，又分为并集和交集的形式：

  • 并集形式，选择器用 , 隔开；

  • 交集形式，选择器用空格隔开；

  • 如果要精细选择某个部分，就可以为这个部分的标签添加特征属性，如 ID , class 等等，再使用交集；

并集

在这里插入图片描述

保存代码，打开页面：

在这里插入图片描述

并集

补充一个常用的标签：

<body><!-- 无序列表标签 --><ul><li></li></ul><!-- 有序列表标签 --><ol><li></li></ol></body>

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

如果要只想让有序列表的超链接字体改为红色，我们就可以使用复合选择器的交集形式：

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

相关文章：

【CSS—前端快速入门】CSS 选择器

CSS 1. CSS介绍 1.1 什么是CSS? CSS(Cascading Style Sheet)&#xff0c;层叠样式表&#xff0c;用于控制页面的样式&#xff1b; CSS 能够对网页中元素位置的排版进行像素级精确控制&#xff0c;实现美化页面的效果&#xff1b;能够做到页面的样式和 结构分离&#xff1b; 1…...

编程日记 2025/3/6 8:10:59

【MYSQL数据库异常处理】执行SQL语句报超时异常

MYSQL执行SQL语句异常&#xff1a;The last packet successfully received from the server was 100,107 milliseconds ago. The last packet sent successfully to the server was 100,101 milliseconds ago. 这个错误表明 MySQL 服务器与 JDBC 连接之间的通信超时了。通常由…...

编程日记 2025/3/6 8:09:56

【Day9】make/makeFile如何让项目构建自动化起飞

【Day9】make/makeFile如何让项目构建自动化起飞 使用make命令编写makefile文件依赖管理增量构建makefile注释&#xff1a;#makefile其他语法 make/makefile递归式工作过程 在Linux中&#xff0c;项目自动化构建是指使用一系列工具和脚本来自动执行软件项目的编译、测试、打包和…...

编程日记 2025/3/6 8:08:54

【单片机】嵌入式系统的硬件与软件特性

嵌入式系统的软件结构 嵌入式系统的软件结构一般分为 不带操作系统&#xff08;Bare Metal&#xff09; 和 带操作系统&#xff08;RTOS / Linux&#xff09; 两种。不同的软件架构适用于不同的应用场景&#xff0c;如 简单控制系统、实时控制系统、物联网、工业自动化等。 嵌…...

编程日记 2025/3/6 8:05:51

C语言学习笔记-初阶（30）深入理解指针2

1. 数组名的理解 在上一个章节我们在使用指针访问数组的内容时&#xff0c;有这样的代码&#xff1a; int arr[10] {1,2,3,4,5,6,7,8,9,10}; int *p &arr[0]; 这里我们使用 &arr[0] 的方式拿到了数组第⼀个元素的地址&#xff0c;但是其实数组名本来就是地址&…...

编程日记 2025/3/6 8:04:49

ROM修改进阶教程------修改安卓机型SELinux宽容的几种方式方法 以及第三方系统中如何关闭SELinux宽容

SELinux是一种强制访问控制安全机制，用于增强Linux系统的安全性。在某些情况下，可能需要对 SELinux 进行宽容设置，以满足特定的应用需求。当SELinux处于宽容模式时，系统允许违反安全策略的行为发生，但不会阻止这些行为，通常会在日志中记录这些违规事件。这与强制模式不同…...

编程日记 2025/3/6 8:03:47

亚马逊云科技Marketplace（中国区）上架专业服务产品， “云生态连接器”价值凸显

近日&#xff0c;由西云数据运营的亚马逊云科技Marketplace&#xff08;中国区&#xff09;正式支持专业服务产品。此次发布将大幅简化企业对云专业服务的采购流程&#xff0c;实现云软件从规划、部署到支持的全生命周期管理&#xff0c;同时也为合作伙伴提供了更多的销售机会。…...

编程日记 2025/3/6 8:00:44

【音视频】音频基础

一、音频基础 1.1 声音的物理性质 ——振动 声音是一种由物体振动引发的物理现象&#xff0c;如小提琴的弦声等。物体的振动使其四周空气的压强产生变化&#xff0c;这种忽强忽弱变化以波的形式向四周传播&#xff0c;当被人耳所接收时&#xff0c;我们就听见了声音。 1.2 声…...

编程日记 2025/3/6 7:53:37

策略模式的C++实现示例

核心思想 策略模式是一种行为型设计模式&#xff0c;它定义了一系列算法&#xff0c;并将每个算法封装在独立的类中&#xff0c;使得它们可以互相替换。策略模式让算法的变化独立于使用它的客户端&#xff0c;从而使得客户端可以根据需要动态切换算法&#xff0c;而不需要修改…...

编程日记 2025/3/6 7:50:31

本地部署pangolin获取谱系，从而达到预测新冠的流行趋势

步骤 1&#xff1a;安装Docker 注&#xff1a;此步骤忽略&#xff0c;可通过Docker官网对于文档进行安装,地址如下 Docker: Accelerated Container Application Developmenthttps://www.docker.com/ 步骤 2&#xff1a;拉取Pangolin镜像 docker pull staphb/pangolin:latest 步…...

编程日记 2025/3/6 7:49:30

【我的 PWN 学习手札】House of Emma

House of Emma 参考文献 第七届“湖湘杯” House _OF _Emma | 设计思路与解析-安全KER - 安全资讯平台 文章 - house of emma 心得体会 - 先知社区 前一篇博客【我的 PWN 学习手札】House of Kiwi-CSDN博客的利用手法有两个关键点&#xff0c;其一是利用__malloc_assert进入…...

编程日记 2025/3/6 7:47:23

4 Redis4 List命令类型讲解

Redis 列表&#xff08;List&#xff09;命令详解 1. Redis 列表&#xff08;List&#xff09;简介 Redis 列表&#xff08;List&#xff09;是一个简单的字符串列表&#xff0c;按照插入顺序排序。它可以用作 栈&#xff08;Stack&#xff09; 和 队列&#xff08;Queue&…...

编程日记 2025/3/6 7:40:15

CentOS 7 安装 Redis6.2.6

获取资源、下载安装 Redis6.2.6 安装Redis6.2.6 上传到服务器或直接下载&#xff08;wget http://download.redis.io/releases/redis-6.2.6.tar.gz&#xff09;、再解压安装 tar -zxvf redis-6.2.6.tar.gz 进入redis解压目录 cd redis-6.2.6先编译 make再执行安装 make PREFI…...

编程日记 2025/3/6 7:36:11

数据库原理4

1.数据库中的数据通常可分为用户数据和系统数据两部分。用户数据是用户使用的数据&#xff1b;系统数据称为数据字典。 2.SQL语言的功能&#xff1a;数据查询&#xff1b;数据操纵&#xff1b;数据定义&#xff1b;数据操作&#xff1b;数据控制 3.对未提交更新的依赖&#x…...

编程日记 2025/3/6 7:24:00

doris: MySQL

Doris JDBC Catalog 支持通过标准 JDBC 接口连接 MySQL 数据库。本文档介绍如何配置 MySQL 数据库连接。 使用须知​ 要连接到 MySQL 数据库&#xff0c;您需要 MySQL 5.7, 8.0 或更高版本 MySQL 数据库的 JDBC 驱动程序&#xff0c;您可以从 Maven 仓库下载最新或指定版本的…...

编程日记 2025/3/6 7:18:54

Django模型数据删除：详解两种方式

Django模型数据删除&#xff1a;详解两种方式 在Django框架中&#xff0c;数据模型&#xff08;Model&#xff09;不仅定义了应用的数据结构&#xff0c;还提供了与数据库交互的接口&#xff0c;包括数据的删除操作。本文将详细介绍两种在Django中删除数据的方式&#xff1a;通…...

编程日记 2025/3/6 7:17:53

C++并发以及多线程的秘密

1.基础概念 并发&#xff08;Concurrency&#xff09; 并发是指在同一时间段内&#xff0c;多个任务看起来像是同时执行的。并发并不一定意味着真正的同时执行&#xff0c;它可以是通过时间片轮转等方式在多个任务之间快速切换&#xff0c;让用户感觉多个任务在同时进行。并发…...

编程日记 2025/3/6 7:15:51

自学微信小程序的第十二天

DAY12 1、腾讯地图SDK是一套为开发者提供多种地理位置服务的工具，可以使开发者在自己的应用中加入地图相关功能，轻松访问腾讯地图服务和数据，更好地实现微信小程序的地图功能。 表49：search()方法的常用选项 选项 类型 说明 keyword string POI搜索关键词，默认周边搜索 l…...

编程日记 2025/3/6 7:14:50

⭐算法OJ⭐跳跃游戏【贪心算法】（C++实现）Jump Game 系列 I,II

既股票买卖系列之后的第二组贪心算法题目&#xff1a;跳跃游戏系列。这一篇介绍的两个问题&#xff0c;其输入均为一个数组&#xff0c;每个元素表示在该位置可以跳跃的最大长度。 55. Jump Game You are given an integer array nums. You are initially positioned at the …...

编程日记 2025/3/6 7:09:45

带你从入门到精通——自然语言处理（五. Transformer中的自注意力机制和输入部分）

建议先阅读我之前的博客&#xff0c;掌握一定的自然语言处理前置知识后再阅读本文&#xff0c;链接如下&#xff1a; 带你从入门到精通——自然语言处理&#xff08;一. 文本的基本预处理方法和张量表示&#xff09;-CSDN博客 带你从入门到精通——自然语言处理&#xff08;二…...

编程日记 2025/3/6 7:07:43

从0开始详解网络安全自学全流程！附对应的视频教程和学习笔记

从0开始详解网络安全自学全流程&#xff01;附对应的视频教程和学习笔记 今天给大家梳理了从0开始详解网络安全自学全流程&#xff01;对应的视频教程和学习笔记也都整理好了&#xff0c;大家去文末自取就行。 第一步&#xff1a;刑法 为什么学&#xff1a;划清合法与违法的红…...

编程新知 2026/5/19 17:20:46

保姆级教程：用Node-RED把传感器数据传到ThingsBoard仪表盘（MQTT全流程）

从零构建物联网数据可视化&#xff1a;Node-RED与ThingsBoard的实战融合 在智能家居、工业监测等物联网场景中&#xff0c;如何将物理世界的传感器数据转化为直观的可视化图表&#xff1f;本文将手把手带您完成从硬件数据采集到云端展示的完整链路实现。不同于单纯的理论讲解&a…...

编程新知 2026/5/19 16:41:06

RT-Thread Studio 2.x 保姆级教程：从新建工程到线程控制LED，新手避坑指南

RT-Thread Studio 2.2实战指南&#xff1a;从零构建线程控制LED的完整路径 第一次打开RT-Thread Studio 2.2时&#xff0c;那个现代化的深色界面确实让人眼前一亮&#xff0c;但随之而来的是一连串的疑问&#xff1a;如何为我的STM32F103C8T6开发板创建项目&#xff1f;线程和裸…...

编程新知 2026/5/19 14:05:30

如何用BilibiliDown轻松搞定B站视频下载：新手到高手的完整指南

如何用BilibiliDown轻松搞定B站视频下载&#xff1a;新手到高手的完整指南 【免费下载链接】BilibiliDown (GUI-多平台支持) B站 哔哩哔哩 视频下载器。支持稍后再看、收藏夹、UP主视频批量下载|Bilibili Video Downloader &#x1f633; 项目地址: https://gitcode.com/gh_m…...

编程新知 2026/5/19 13:27:57

从静态地图到动态避障：图解ROS中global_costmap与local_costmap如何协同工作

从静态地图到动态避障&#xff1a;图解ROS中global_costmap与local_costmap如何协同工作 在机器人自主导航领域&#xff0c;理解代价地图的工作原理是构建可靠导航系统的关键。想象一下&#xff0c;当人类在陌生城市中导航时&#xff0c;我们会同时参考静态的城市地图和实时观察…...

编程新知 2026/5/19 13:21:25

御坂翻译器：3分钟开启你的日语游戏无障碍之旅

御坂翻译器&#xff1a;3分钟开启你的日语游戏无障碍之旅 【免费下载链接】MisakaTranslator 御坂翻译器—Galgame/文字游戏/漫画多语种实时机翻工具 项目地址: https://gitcode.com/gh_mirrors/mi/MisakaTranslator 你是否曾经因为语言障碍而错过了那些精彩的日系游戏剧…...

编程新知 2026/5/19 12:53:56

三分钟解锁B站缓存：m4s-converter视频转换全解析

三分钟解锁B站缓存&#xff1a;m4s-converter视频转换全解析 【免费下载链接】m4s-converter 一个跨平台小工具&#xff0c;将bilibili缓存的m4s格式音视频文件合并成mp4 项目地址: https://gitcode.com/gh_mirrors/m4/m4s-converter 还在为B站下架视频而烦恼吗&#xf…...

编程新知 2026/5/19 12:37:57

Adobe-GenP 3.0终极指南：5分钟快速免费激活Adobe全系列软件

Adobe-GenP 3.0终极指南&#xff1a;5分钟快速免费激活Adobe全系列软件 【免费下载链接】Adobe-GenP Adobe CC 2019/2020/2021/2022/2023 GenP Universal Patch 3.0 项目地址: https://gitcode.com/gh_mirrors/ad/Adobe-GenP Adobe-GenP是一款革命性的Adobe Creative Cl…...

编程新知 2026/5/19 12:01:53

从SPI到QSPI：你的Flash读写速度慢？可能是模式没选对（以W25Q128JV为例）

从SPI到QSPI&#xff1a;解锁W25Q128JV Flash的隐藏性能 在嵌入式系统开发中&#xff0c;存储器的读写速度往往是制约整体性能的关键瓶颈。许多工程师在使用常见的SPI Flash芯片如W25Q128JV时&#xff0c;可能已经习惯了标准的SPI接口操作&#xff0c;却不知道通过简单的模式切…...

编程新知 2026/5/19 10:50:50

【亲测免费】 快递单PaddleOCR数据集：助力OCR技术研究与应用

快递单PaddleOCR数据集&#xff1a;助力OCR技术研究与应用 【下载地址】快递单PaddleOCR数据集 本仓库提供了一个专门用于PaddleOCR模型训练和测试的快递单数据集。该数据集包含了大量经过标注的快递单图像&#xff0c;适用于OCR技术的研究和开发 项目地址: https://gitcode.…...

编程新知 2026/5/19 10:16:12