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

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

news 2025/11/6 12:26:45

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

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

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

编程新知 2025/11/5 23:05:21

stm32G473的flash模式是单bank还是双bank？

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

编程新知 2025/10/30 15:52:04

Appium+python自动化（十六）- ADB命令

简介 Android 调试桥(adb)是多种用途的工具&#xff0c;该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具&#xff0c;其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试…...

编程新知 2025/11/2 22:52:17

React Native 开发环境搭建（全平台详解）

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

编程新知 2025/10/7 2:47:54

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

编程新知 2025/10/31 17:52:25

Admin.Net中的消息通信SignalR解释

定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

编程新知 2025/9/10 5:36:56

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

编程新知 2025/11/1 0:38:44

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

编程新知 2025/11/5 4:54:32

（转）什么是DockerCompose?它有什么作用？

一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用&#xff0c;而无需手动一个个创建和运行容器。 Compose文件是一个文本文件&#xff0c;通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...

编程新知 2025/10/31 1:13:56

Angular微前端架构：Module Federation + ngx-build-plus (Webpack)

以下是一个完整的 Angular 微前端示例&#xff0c;其中使用的是 Module Federation 和 npx-build-plus 实现了主应用&#xff08;Shell&#xff09;与子应用&#xff08;Remote&#xff09;的集成。 &#x1f6e0;️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...

编程新知 2025/6/15 10:41:11