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

【前端】深入解析CSS：选择器、显示模式、背景属性和特征剖析

news 2025/10/18 16:45:40

目录

  • 一、前言
  • 二、CSS的复合选择器
    • 1、后代选择器
      • ①、语法
      • ②、注意事项
    • 2、子选择器
      • ①、语法
      • ②、注意事项
    • 3、并集选择器
      • ①、语法
      • ②、注意事项
    • 4、链接伪类选择器
      • ①、语法
      • ②、注意事项
  • 三、CSS元素显示模式转换
    • 1、转换为块元素display:block
    • 2、转换为行内元素display:inline
    • 3、转换为行内块元素display:inline-block
  • 四、CSS背景属性
    • 1、背景平铺
    • 2、背景图片位置
    • 3、背景图像固定（背景附着）
    • 4、背景颜色的半透明
  • 五、CSS的三大特征之一-继承性
    • 1、行高的继承性
  • 六、总结

一、前言

CSS（层叠样式表）作为前端开发的核心技术之一，为网页赋予了美观和交互性。本文将深入探讨CSS的复合选择器、元素显示模式、背景属性以及其三大特征，帮助读者更好地理解和应用CSS。

二、CSS的复合选择器

1、后代选择器

后代选择器又称为包含选择器，可以选择父元素里边子元素，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代

①、语法

语法：元素1 元素2 {样式声明}

<!DOCTYPE html>
<html lang="en">
<head><style><!-- 元素1 元素2 {样式声明} -->ol li{color:pink}</style>
</head>
<body><ol><li>hhh</li><li>hhh</li><li>hhh</li></ol><ul><li>你好</li><li>你好</li><li>你好</li><li>你好</li></ul>
</body>
</html>

②、注意事项

  1. 元素1和元素2中间用空格隔开
  2. 元素1是父级，元素2是子级，最终选择的是<font color="red"元素2
  3. 元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可
  4. 元素1和元素2可以是任意基础选择器

2、子选择器

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素

①、语法

语法：元素1>元素2 {样式声明}

<!DOCTYPE html>
<html lang="en"><head><style>.nav>a {color: red;}/* .nav p>a {color: red;} */</style>
</head><body><div class="nav"><a href="#">我是儿子</a><p><a href="#">我是孙子</a></p></div>
</body></html>

在这里插入图片描述

修改“我是孙子”为红色

<!DOCTYPE html>
<html lang="en"><head><style>/* .nav>a {color: red;} */.nav p>a {color: red;}</style>
</head><body><div class="nav"><a href="#">我是儿子</a><p><a href="#">我是孙子</a></p></div>
</body></html>

在这里插入图片描述

②、注意事项

  1. 元素1和元素2中间用大于号隔开
  2. 元素1是父级，元素2是子级，最终选择的是元素2
  3. 元素2必须是亲儿子，其孙子、重孙子之类都不归它管，也可以叫它亲儿子选择器

3、并集选择器

并集选择器可以选择多组标签，同时为它们定义相同的样式。通常用于集体声明
并集选择器是各选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分

①、语法

语法：元素1，元素2 {样式声明}

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div,p {color: red;}</style>
</head><body><div>并集选择器1</div><p>并集选择器2</p>
</body></html>

在这里插入图片描述

②、注意事项

  1. 元素1和元素2中间用逗号隔开
  2. 逗号可以理解为和的意思
  3. 并集选择器通常用于集体

4、链接伪类选择器

①、语法

<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 1.未访问的链接a:link 把没有访问过的（点击过的）链接选出来 */a:link{color: black;/* 取消下划线 */text-decoration: none;}/* 2.选择点击过的（访问过的）链接 */a:visited{color: burlywood;}/* 3.选择鼠标经过的那个链接 */a:hover{color:pink}/* 4.选择的是我们鼠标正在按下还没有谈起鼠标的那个链接 */a:active{color: blueviolet;}</style>
</head><body><a href="#">小猪佩奇</a>
</body></html>

②、注意事项

  1. 为了确保生效，请按照LVHA的循顺序声明:link - :visited - :hover - :active
  2. 因为a链接在浏览器中具有默认样式，需要给链接单独制定样式
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 设置链接为黑色，并取消下划线 */a{color: black;text-decoration: none;}/* 3.选择鼠标经过的链接，并显示下划线 */a:hover{color:pink;text-decoration:underline;}</style>
</head><body><a href="#">小猪佩奇</a><a href="www">小点读猪佩奇</a>
</body>

在这里插入图片描述

三、CSS元素显示模式转换

1、转换为块元素display:block

<head><style>a{width: 240px;height: 30px;background-color: palegoldenrod;/* 把行内元素a转换为块级元素 */display: block;}</style>
</head>
<body><a href="#">百度</a><a href="#">谷歌</a>
</body>
</html>

在这里插入图片描述

2、转换为行内元素display:inline

<head><style>div{
/*             width: 240px; */
/*             height: 30px; */background-color: aquamarine;/* 把div 块级元素转换为行内元素 */display: inline;}</style>
</head>
<body><div>小猪佩奇</div><div>苹果</div>
</body>
</html>

在这里插入图片描述

如果使用display: inline的话，则width、height不生效

3、转换为行内块元素display:inline-block

<head><style>span{width: 300px;height: 30px;background-color: coral;display: inline-block;}</style>
</head>
<body><span>行内元素转换为行内块元素</span><span>行内元素转换为行内块元素</span>
</body>
</html>

在这里插入图片描述

如果使用display: inline-block的话，则width、height生效

四、CSS背景属性

1、背景平铺

在这里插入图片描述

background-image: url(image/0001.png);
/* 1.背景图片不平铺 */
background-repeat: no-repeat;/* 2.默认的情况下，背景图片时平铺的 */
background-repeat: repeat;/* 3.沿着x轴平铺 */
background-repeat: repeat-x;/* 4.沿着y轴平铺 */
background-repeat: repeat-y;

2、背景图片位置

/* 背景图片位置
* 如果指定的两个值都是方位名词，则两个值前后顺序无关
* 如果只指定了一个方位名词，另一个值省略，则第二个值默认
* 居中对齐*/
background-position: center top;background-position: right center;background-position: 20px center;

3、背景图像固定（背景附着）

  1. background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动
  2. background-attachment后期可以制作视差滚动的效果
#背景图像是随对象内容滚动(默认的是scroll滚动的)
background-attachment: scroll#背景图像固定
background-attachment: fixed

4、背景颜色的半透明

background: rgba(0,0,0,0.3)

五、CSS的三大特征之一-继承性

1、行高的继承性

语法

body{font: 12px/1.5 Microsoft YaHei;
}
  • 行高可以跟单位也可以不跟单位
  • 如果子元素没有设置行高，则会继承父元素的行高为1.5
  • 此时子元素的行高是：当前子元素的文字大小*1.5
  • body行高1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高

六、总结

CSS的复合选择器、元素显示模式、背景属性以及其三大特征共同构成了CSS的核心部分。通过深入理解这些概念，开发者可以更灵活地控制元素的样式和外观，从而创造出更精美、交互性更强的网页。

相关文章：

【前端】深入解析CSS：选择器、显示模式、背景属性和特征剖析

目录 一、前言二、CSS的复合选择器1、后代选择器①、语法②、注意事项 2、子选择器①、语法②、注意事项 3、并集选择器①、语法②、注意事项 4、链接伪类选择器①、语法②、注意事项 三、CSS元素显示模式转换1、转换为块元素display:block2、转换为行内元素display:inline3、转…...

编程日记 2023/8/25 16:33:51

算法训练营第三十四天（8.23）| 动态规划Part04：01背包

目录 Leecode 1049.最后一块石头的重量II Leecode 494.目标和 Leecode 474.一和零 Leecode 1049.最后一块石头的重量II 题目地址&#xff1a;力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 题目类型&#xff1a;01背包 class Solution { public:int…...

编程日记 2023/8/25 16:32:48

【python】tkinter使用多进程打包成exe后multiprocessing无法关闭对应进程

这是由于multiprocessing模块在Windows操作系统下使用fork方法创建子进程时会导致打包成exe后无法正常运行的问题。 可以尝试使用freeze_support函数来解决这个问题。freeze_support函数是在Windows操作系统下用于支持multiprocessing模块的函数。 下面是一个示例代码&#x…...

编程日记 2023/8/25 16:31:48

Redis工具类（缓存操作，Object转换成JSON数据）

依赖spring-data-redis-2.4.1.jar Component Data public class RedisUtils {Autowiredprivate RedisTemplate<String, Object> redisTemplate;Resource(name "stringRedisTemplate")private ValueOperations<String, String> valueOperations;/*** 默…...

编程日记 2023/8/25 16:30:47

Linux 下 Java Socket 编程报 java.net.Exception:Permission denied (权限不足)

本人用Linux部署springboot项目时遇见这个错误&#xff0c;原因很简单&#xff0c;就是端口号没有选对。 在linux系统中&#xff0c;端口号再1024以下的需要root权限&#xff0c;只要把端口改成大于1024的就可以了&#xff0c;但避开一些软件的默认端口&#xff0c;如Tomcat的8…...

编程日记 2023/8/25 16:29:46

IDEA项目实践——VUE介绍与案例分析

系列文章目录 IDEA项目实践——JavaWeb简介以及Servlet编程实战 IDEA项目实践——Spring集成mybatis、spring当中的事务 IDEA项目实践——Spring当中的切面AOP IDEWA项目实践——mybatis的一些基本原理以及案例 IDEA项目实践——Spring框架简介&#xff0c;以及IOC注解 I…...

编程日记 2023/8/25 16:28:44

vue-canvas基本使用和注意事项-动画闪烁效果-自适应适配不同分辨率问题

前言 canvas画布是html的新特性&#xff0c;熟悉画布我们可以完成很多拖拽&#xff0c;标注&#xff0c;动画的功能 使用canvas实现一个小例子很容易&#xff0c;但是真正在项目中使用时&#xff0c;我们需要注意的地方有很多 canvas基本原理就是它基于渲染方法&#xff0c;根…...

编程日记 2023/8/25 16:27:43

Jmeter 如何才能做好接口测试？

现在对测试人员的要求越来越高&#xff0c;不仅仅要做好功能测试&#xff0c;对接口测试的需求也越来越多&#xff01; 所以也越来越多的同学问&#xff0c;怎样才能做好接口测试&#xff1f; 要真正的做好接口测试&#xff0c;并且弄懂如何测试接口&#xff0c;需要从如下几…...

编程日记 2023/8/25 16:26:43

电商平台京东平台获得京东商品描述API接口演示案例

京东商品描述API接口可以获取京东商品描述&#xff1a; 详细介绍商品的特点和功能,让消费者能够了解商品的具体用途和效果。 使用简洁明了的语言,避免使用过于专业的术语和长句子,让消费者能够轻松理解。 重点突出商品的卖点和优势,让消费者能够更加清晰地了解商品的价值 …...

编程日记 2023/8/25 16:25:41

《算法竞赛·快冲300题》每日一题：“单位转换”

《算法竞赛快冲300题》将于2024年出版&#xff0c;是《算法竞赛》的辅助练习册。 所有题目放在自建的OJ New Online Judge。 用C/C、Java、Python三种语言给出代码&#xff0c;以中低档题为主&#xff0c;适合入门、进阶。 文章目录 题目描述题解C代码Java代码Python代码 “ 单…...

编程日记 2023/8/25 16:24:40

R语言13-R语言中的数据导入导出和批量导入

数据导入 CSV 文件&#xff1a; 使用 read.csv() 函数导入逗号分隔的文本文件。 data <- read.csv("data.csv")Excel 文件&#xff1a; 使用 readxl 包中的函数 read_excel() 导入 Excel 文件。 install.packages("readxl") # 安装 readxl 包&#…...

编程日记 2023/8/25 16:23:39

【Java】对象与类

【Java】对象与类 文章目录 【Java】对象与类1、学习背景2、定义&使用2.1 创建类2.2 创建对象 3、static关键字3.1 修饰变量3.2 修饰方法3.3 修饰代码块3.4 修饰内部类 4、this关键字5、封装特性5.1 访问修饰符5.2 包的概念 6、构造方法7、代码块7.1 普通代码块7.2 成员代码…...

编程日记 2023/8/25 16:22:37

视频尺寸缩小，一键批量剪辑，轻松制作精简版

大家好&#xff01;在视频剪辑中&#xff0c;有时我们需要将大尺寸的视频缩小&#xff0c;以适应特定的需求和平台要求。为了帮助您轻松制作精简版视频&#xff0c;我们推出了一款全新的工具——视频尺寸缩小批量剪辑软件&#xff01;让您一键批量将视频尺寸缩小&#xff0c;轻…...

编程日记 2023/8/25 16:21:35

leetcode做题笔记94. 二叉树的中序遍历

给定一个二叉树的根节点 root &#xff0c;返回 它的 中序 遍历 。 思路一&#xff1a;模拟题意 void inorder(struct TreeNode*root,int* ans,int *resSize) {if(!root){return ;}inorder(root->left,ans,resSize);ans[(*resSize)] root->val;inorder(root->right…...

编程日记 2023/8/25 16:20:34

UWB高精度人员定位系统源码，微服务+java+ spring boot+ vue+ mysql技术开发

工业物联网感知预警体系&#xff0c;大中小企业工业数字化转型需求的工业互联网平台 工厂人员定位系统是指能够对工厂中的人员、车辆、设备等进行定位&#xff0c;实现对人员和车辆的实时监控与调度的系统&#xff0c;是智慧工厂建设中必不可少的一环。由于工厂的工作环境比较…...

编程日记 2023/8/25 16:19:30

企业党建杂志企业党建杂志社企业党建编辑部2023年第4期目录

卷首语 坚持学思用贯通 知信行统一 (0001) 赵荣地 国企与国资《企业党建》投稿&#xff1a;cn7kantougao163.com 深入推进新时代党的建设的重大部署 (0004) 陈锋 国有企业推进中国式现代化建设的使命任务和实践路径 (0006) 蒋雪群 创新与实践 浅析国企党建与生产经营工作…...

编程日记 2023/8/25 16:18:27

ChatGPT + Flutter快速开发多端聊天机器人App

下载地址&#xff1a;ChatGPT Flutter快速开发多端聊天机器人App 下载地址&#xff1a;ChatGPT Flutter快速开发多端聊天机器人App...

编程日记 2023/8/25 16:17:26

ubuntu18.04复现yolo v8之最终章，realsenseD435i+yolo v8完美运行

背景&#xff1a;上一篇博客我们已经为复现yolov8配置好了环境&#xff0c;如果前面的工作顺利进行&#xff0c;我们已经完成了90%&#xff08;学习类程序最难的是环境配置&#xff09;。 接下来将正式下载yolov8的相关代码&#xff0c;以及进行realsenseD435i相机yolo v8的de…...

编程日记 2023/8/25 16:16:25

Python统计中文词频的四种方法

统计中文词频是Python考试中常见的操作&#xff0c;由于考察内容较多&#xff0c;因此比较麻烦&#xff0c;那么有没有好的方法来实现呢&#xff1f;今天&#xff0c;我们总结了四种常见的中文词频统计方法&#xff0c;并列出代码&#xff0c;供大家学习参考。 中文词频统计主…...

编程日记 2023/8/25 16:15:20

sql server 快速安装

目录标题 一、下载二、直接选择基本安装二、下载ssms&#xff08;数据库图形化操作页面&#xff09;三、开启sa账号认证&#xff08;一&#xff09;第一步&#xff1a;更改身份验证模式&#xff08;二&#xff09;第二步&#xff1a;启用 sa 登录四、开启tcp/ip 一、下载 下载…...

编程日记 2023/8/25 16:14:19

进程地址空间（比特课总结）

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

编程新知 2025/7/9 17:20:48

【人工智能】神经网络的优化器optimizer（二）：Adagrad自适应学习率优化器

一.自适应梯度算法Adagrad概述 Adagrad&#xff08;Adaptive Gradient Algorithm&#xff09;是一种自适应学习率的优化算法&#xff0c;由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率&#xff0c;适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

编程新知 2025/10/17 21:28:50

线程与协程

1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指&#xff1a;像函数调用/返回一样轻量地完成任务切换。 举例说明&#xff1a; 当你在程序中写一个函数调用&#xff1a; funcA() 然后 funcA 执行完后返回&…...

编程新知 2025/8/6 18:56:50

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

编程新知 2025/10/14 13:23:16

SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现，论文初版实现

摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序&#xff0c;以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务&#xff0c;提供稳定高效的数据处理与业务逻辑支持&#xff1b;利用 uniapp 实现跨平台前…...

编程新知 2025/10/14 13:22:37

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

编程新知 2025/10/2 6:08:50

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...

编程新知 2025/9/3 4:12:17

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

编程新知 2025/10/6 22:42:00

Aspose.PDF 限制绕过方案：Java 字节码技术实战分享（仅供学习）

Aspose.PDF 限制绕过方案&#xff1a;Java 字节码技术实战分享&#xff08;仅供学习&#xff09; 一、Aspose.PDF 简介二、说明&#xff08;⚠️仅供学习与研究使用&#xff09;三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...

编程新知 2025/9/28 3:20:23

代码随想录刷题day30

1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币&#xff0c;另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额&#xff0c;返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...

编程新知 2025/10/4 6:30:56