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

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

news 2025/10/18 18:46:01

目录

  • 一、前言
  • 二、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

Python｜GIF 解析与构建（5）：手搓截屏和帧率控制

目录 Python&#xff5c;GIF 解析与构建&#xff08;5&#xff09;&#xff1a;手搓截屏和帧率控制 一、引言 二、技术实现&#xff1a;手搓截屏模块 2.1 核心原理 2.2 代码解析&#xff1a;ScreenshotData类 2.2.1 截图函数&#xff1a;capture_screen 三、技术实现&…...

编程新知 2025/9/19 8:02:57

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

编程新知 2025/10/10 18:04:11

云原生核心技术 (7/12): K8s 核心概念白话解读(上)：Pod 和 Deployment 究竟是什么？

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

编程新知 2025/9/6 5:44:49

iOS 26 携众系统重磅更新，但“苹果智能”仍与国行无缘

美国西海岸的夏天&#xff0c;再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至&#xff0c;这不仅是开发者的盛宴&#xff0c;更是全球数亿苹果用户翘首以盼的科技春晚。今年&#xff0c;苹果依旧为我们带来了全家桶式的系统更新&#xff0c;包括 iOS 26、iPadOS 26…...

编程新知 2025/10/18 5:19:13

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中，选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南： ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

编程新知 2025/8/3 11:17:37

系统设计 --- MongoDB亿级数据查询优化策略

系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log&#xff0c;共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题&#xff0c;不能使用ELK只能使用…...

编程新知 2025/10/12 17:05:25

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

编程新知 2025/9/9 5:38:23

华为云Flexus+DeepSeek征文｜DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建

华为云FlexusDeepSeek征文&#xff5c;DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色&#xff0c;华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型&#xff0c;能助力我们轻松驾驭 DeepSeek-V3/R1&#xff0c;本文中将分享如何…...

编程新知 2025/9/30 3:12:52

什么？连接服务器也能可视化显示界面？：基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录 什么是X11？环境准备实战步骤1️⃣ 服务器端配置（CentOS）2️⃣ 客户端配置（MobaXterm）3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

编程新知 2025/10/2 17:12:14

pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)

目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关&#xff0…...

编程新知 2025/9/26 5:35:43