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

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

news 2025/9/18 10:21:11

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

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

日语AI面试高效通关秘籍：专业解读与青柚面试智能助攻

在如今就业市场竞争日益激烈的背景下&#xff0c;越来越多的求职者将目光投向了日本及中日双语岗位。但是&#xff0c;一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧&#xff1f;面对生疏的日语交流环境&#xff0c;即便提前恶补了…...

编程新知 2025/9/14 13:49:51

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题&#xff1a; 下面创建一个简单的Flask RESTful API示例。首先&#xff0c;我们需要创建环境&#xff0c;安装必要的依赖&#xff0c;然后…...

编程新知 2025/9/15 5:18:46

java 实现excel文件转pdf | 无水印 | 无限制

文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具，自己手写的难度，恐怕高级程序员花费一年的事件，也…...

编程新知 2025/7/18 10:35:00

pam_env.so模块配置解析

在PAM&#xff08;Pluggable Authentication Modules&#xff09;配置中&#xff0c; /etc/pam.d/su 文件相关配置含义如下&#xff1a; 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块&#xff0c;负责验证用户身份&am…...

编程新知 2025/8/21 21:33:01

c++ 面试题(1)-----深度优先搜索（DFS）实现

操作系统&#xff1a;ubuntu22.04 IDE:Visual Studio Code 编程语言&#xff1a;C11 题目描述 地上有一个 m 行 n 列的方格&#xff0c;从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子&#xff0c;但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...

编程新知 2025/9/11 4:52:26

QT： `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...

编程新知 2025/9/17 16:50:15

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

编程新知 2025/9/9 10:09:41

Unsafe Fileupload篇补充-木马的详细教程与木马分享（中国蚁剑方式）

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马&#xff08;服务器方面的&#xff09;的原理&#xff0c;连接&#xff0c;以及各种木马及连接工具的分享 文件木马&#xff1a;https://w…...

编程新知 2025/9/13 17:41:27

重启Eureka集群中的节点，对已经注册的服务有什么影响

先看答案&#xff0c;如果正确地操作&#xff0c;重启Eureka集群中的节点&#xff0c;对已经注册的服务影响非常小&#xff0c;甚至可以做到无感知。 但如果操作不当&#xff0c;可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...

编程新知 2025/8/13 21:32:37

蓝桥杯 冶炼金属

原题目链接 &#x1f527; 冶炼金属转换率推测题解 &#x1f4dc; 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V&#xff0c;是一个正整数&#xff0c;表示每 V V V 个普通金属 O O O 可以冶炼出 …...

编程新知 2025/9/18 4:10:42