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

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

news 2026/2/7 17:31:43

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

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

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

编程新知 2025/10/5 2:30:38

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括&#xff1a;采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中&#xff0c;设置任务排序规则尤其重要&#xff0c;因为它让看板视觉上直观地体…...

编程新知 2026/1/23 12:42:28

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

编程新知 2026/2/1 7:31:51

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

编程新知 2025/12/17 5:54:30

ios苹果系统，js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

编程新知 2026/2/4 19:47:03

React---day11

14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store&#xff1a; 我们在使用异步的时候理应是要使用中间件的&#xff0c;但是configureStore 已经自动集成了 redux-thunk&#xff0c;注意action里面要返回函数 import { configureS…...

编程新知 2026/1/19 2:13:24

Netty从入门到进阶（二）

二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架&#xff0c;用于…...

编程新知 2026/1/26 5:44:16

STM32---外部32.768K晶振（LSE）无法起振问题

晶振是否起振主要就检查两个1、晶振与MCU是否兼容&#xff1b;2、晶振的负载电容是否匹配 目录 一、判断晶振与MCU是否兼容 二、判断负载电容是否匹配 1. 晶振负载电容&#xff08;CL&#xff09;与匹配电容&#xff08;CL1、CL2&#xff09;的关系 2. 如何选择 CL1 和 CL…...

编程新知 2026/2/7 10:55:43

wpf在image控件上快速显示内存图像

wpf在image控件上快速显示内存图像https://www.cnblogs.com/haodafeng/p/10431387.html 如果你在寻找能够快速在image控件刷新大图像&#xff08;比如分辨率3000*3000的图像&#xff09;的办法&#xff0c;尤其是想把内存中的裸数据&#xff08;只有图像的数据&#xff0c;不包…...

编程新知 2026/1/31 9:25:11

用递归算法解锁「子集」问题 —— LeetCode 78题解析

文章目录 一、题目介绍二、递归思路详解&#xff1a;从决策树开始理解三、解法一&#xff1a;二叉决策树 DFS四、解法二&#xff1a;组合式回溯写法&#xff08;推荐&#xff09;五、解法对比 递归算法是编程中一种非常强大且常见的思想&#xff0c;它能够优雅地解决很多复杂的…...

编程新知 2025/10/4 7:43:43