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

前端小白的学习之路(CSS3 一)

news 2025/9/12 18:16:57

提示：CSS3 是 Cascading Style Sheets（层叠样式表）的第三个主要版本，引入了许多新的特性和增强功能，用于设计和布局网页。本章记录CSS3新增选择器，盒子模型。

一、C3新增选择器

1) 属性选择器

1.[class^='className']

2.tag[class^='className']

3.tag[class$='className']

4.tag[class*='className']

5.input[type='typeName']

2)伪类选择器

1.first-child

2.last-child

3.nth-child(n) 与 nth-of-type(n)

3)其他选择器

1.empty

2.not('className')

3.+相邻选择器

4.~兄弟选择器

二、盒子模型box-sizing

1.content-box

2.border-box

一、C3新增选择器

1) 属性选择器

1.[class^='className']

<style>
/*选中所有class属性以box开头的标签*/[class^="box"] {width: 100px;height: 100px;margin: 10px;border: 1px solid #ccc;}</style>
</head><body><div class="box1 bbb ccc"></div><div class="box2 aaa bbb"></div><div class="box3 bbb"></div>
</body>

2.tag[class^='className']

<style>/* 选中所有class属性以box开头的div标签 */div[class^="box"] {background-color: red;}
</style>
</head><body><div class="box1 bbb ccc"></div><div class="box2 aaa bbb"></div><div class="box3 bbb"></div>
</body>

3.tag[class$='className']

<style>/* 选中所有class属性以bbb结束的div标签 */div[class$="bbb"] {border-radius: 20px;}
</style>
</head><body><div class="box1 bbb ccc"></div><div class="box2 aaa bbb"></div><div class="box3 bbb"></div>
</body>

4.tag[class*='className']

<style>/* 选中所有class属性包含aaa的div标签 */div[class*="aaa"] {opacity: .2;}
</style>
</head><body><div class="box1 bbb ccc"></div><div class="box2 aaa bbb"></div><div class="box3 bbb"></div>
</body>

5.input[type='typeName']

<style>/* 选择文本输入框标签 */input[type="text"] {height: 40px;border: 2px solid blue;box-sizing: border-box;float: left;}/* 选择submit按钮标签 */input[type="submit"] {height: 40px;border: 2px solid deeppink;cursor: pointer;float: left;}
</style>
</head><body><div class="clearfix"><input type="text"><input type="submit"></div>
</body>

2)伪类选择器

1.first-child

选择第一个标签

<style>ul {margin-top: 10px;}/*选择ul下的第一个li标签*/ul li:first-child {font-size: 40px;color: red;}
</style>
</head><body><ul><li>列表1</li><li>列表2</li><li>列表3</li><li>列表4</li><li>列表5</li><li></li><li class="demo">123456</li><div>这才是最后一个标签</div></ul>
</body>

2.last-child

选择最后一个标签

<style>ul {margin-top: 10px;}/*选择ul下的第最后一个个li标签*//*如果最后一个不是li标签就会选择到那个标签*/ul li:last-child {font-size: 40px;color: green;}/*这才是最后一个标签*/ul div:last-child {font-size: 40px;color: green;}
</style>
</head><body><ul><li>列表1</li><li>列表2</li><li>列表3</li><li>列表4</li><li>列表5</li><li></li><li class="demo">123456</li><div>这才是最后一个标签</div></ul>
</body>

3.nth-child(n) 与 nth-of-type(n)

选择第n个标签

<style>ul {margin-top: 10px;}/* 选择第2个 */ul li:nth-child(2) {color: purple;font-weight: bold;font-size: 30px;}/* 选择第3个 */ul li:nth-of-type(3) {color: yellowgreen;font-weight: bold;font-size: 20px;}/* 选择偶数对应的标签 n: 1,2,3,4,5,6,7,8,9........*/ol li:nth-child(2n) {background-color: red;}/* 选择奇数对应的标签 n: 1,2,3,4,5,6,7,8,9........*/ol li:nth-child(2n-1) {background-color: blue;}
</style>
</head><body><ul><li>列表1</li><li>列表2</li><li>列表3</li><li>列表4</li><li>列表5</li><li></li><li class="demo">123456</li><div>这才是最后一个标签</div></ul>
</body>

3)其他选择器

1.empty

没有任何内容的标签

<style>/* 选择没有任何内容的标签 */ul li:empty {height: 40px;width: 100px;background-color: pink;}</style>
</head><body><ol><li>选项1</li><li class="current">选项2</li><li>选项3</li><li>选项4</li><li>选项5</li><li>选项6</li></ol>
</body>

2.not('className')

选择除了包含className类名的其他标签

<style>
/* 选择除了类名叫.demo的所有其他li标签 */ol li:not(.demo) {list-style: none;}</style>
</head><body><ol><li>选项1</li><li class="current">选项2</li><li>选项3</li><li class='demo'>选项4</li><li>选项5</li><li>选项6</li></ol>
</body>

3.+相邻选择器

选择相邻的标签

<style>/* 相邻选择器 */.current+li {height: 100px;}</style>
</head><body><ol><li>选项1</li><li class="current">选项2</li><li>选项3</li><li>选项4</li><li>选项5</li><li>选项6</li></ol>
</body>

4.~兄弟选择器

选择兄弟标签

<style>/* 兄弟选择器 */.current~li {opacity: .3;}
</style>
</head><body><ol><li>选项1</li><li class="current">选项2</li><li>选项3</li><li>选项4</li><li>选项5</li><li>选项6</li></ol>
</body>

二、盒子模型box-sizing

box-sizing 是一个 CSS 属性，用于指定元素的盒子模型的计算方式。它有以下几种取值：

1.content-box

box-sizing: content-box;
/*默认属性,表示内容盒子,盒子模型总宽高=width/height+左右/上下padding+左右/上下border*/

2.border-box

box-sizing: border-box;/*表示怪异盒子,盒子模型总宽高=width/height*/

前端小白的学习之路(CSS3 一)

提示：CSS3 是 Cascading Style Sheets（层叠样式表）的第三个主要版本，引入了许多新的特性和增强功能，用于设计和布局网页。本章记录CSS3新增选择器，盒子模型。目录一、C3新增选择器 1) 属性选择器 1.[c…...

编程日记 2024/3/20 19:56:54

春暖花开，一起来看看2024年品牌春分海报吧！

春分（Vernal equinox）已至，春花烂漫、燕子归来、百草回芽。今天我们要分享的是2024年品牌发布的春分节气海报合集，快来随我们一起感受这昂扬、蓬勃的春意吧! （1）泸州老窖 （2）BD…...

编程日记 2024/3/20 19:55:52

golang面试题总结

零、go与其他语言 0、什么是面向对象在了解 Go 语言是不是面向对象（简称：OOP） 之前，我们必须先知道 OOP 是啥，得先给他 “下定义” 根据 Wikipedia 的定义，我们梳理出 OOP 的几个基本认知： …...

编程日记 2024/3/20 19:53:50

BUGKU-WEB shell

题目描述题目截图如下： 描述： $poc "a#s#s#e#r#t";$poc_1 explode("#", $poc);$poc_2 $poc_1[0].$poc_1[1].$poc_1[2].$poc_1[3].$poc_1[4].$poc_1[5];$poc_2($_GET[s])进入场景看看：是一个空白的界面解题思路 …...

编程日记 2024/3/20 19:48:45

系统重构后，对项目定制开发的兼容性问题

公司自实施产品线战略以来，基本推翻了全部旧有业务模块。后续以标准产品二次开发的模式进行项目开发。但在涉及到一些旧有系统二期、三期升级改造过程中。不可避免的需要解决旧有系统的客户定制化开发兼容性问题。也就是旧有系统定制开发的模块不能丢弃。重新开发从…...

编程日记 2024/3/20 19:47:43

Linux---基本操作命令之用户管理命令

1.1useradd 添加新用户 root用户：/root 普通用户：/home/ 创建的用户还是david，只是在dave文件夹下 1.2 passwd 设置密码给用户tony设置密码: 123456 1.3 id 查看用户是否存在查看有没有这个用户：id 名字 gid：用…...

编程日记 2024/3/20 19:46:41

excel 破解保护工作簿及保护工作表

excel 破解保护工作簿及保护工作表对于这种保护工作簿及保护工作表不知道密码时，可以使用以下方法破解保护工作簿破解打开受保存的excel 右键点击sheet名称 —> 查看代码复制以下代码，粘贴到代码区域 Sub 工作簿密码破解() ActiveWorkbook.…...

编程日记 2024/3/20 19:38:33

django-comment-migrate 模型注释的使用

django-comment-migrate 的使用 django-comment-migrate 是一个 Django 应用，用于将模型注释自动迁移到数据库表注释中。它可以帮助您保持数据库表注释与模型定义的一致性，并提高代码的可读性。安装要使用 django-comment-migrate，您需要…...

编程日记 2024/3/20 19:36:30

Python学习：列表

Python 列表概念在Python中，列表（List）是一种有序、可变、允许重复元素的数据结构。列表使用方括号 []来表示，可以包含任意类型的元素，如整数、字符串、列表等。 Python 访问列表中的值在Python中&#xff0…...

编程日记 2024/3/20 19:35:28

C语言每日一题—判断是否为魔方矩阵

魔方矩阵在魔方阵中，所有的行、列和对角线都拥有相同的和。例如：17 24 1 8 15 23 5 7 14 16 4 9 24 6 13 20 22 和 3 5 710 12 19 21 3 8 1 611 18 25 2 9 写一个程序读入一个二维整型数组并…...

编程日记 2024/3/20 19:33:26

Java数组新手冷知识

J a v a Java Java 中，数组是对象，当你将一个数组传递给方法时，你其实是传递了数组的引用（地址），而不是数组的副本。因此，在 m m m 方法中修改了数组 n n n 的内容后，这种改变在方…...

编程日记 2024/3/20 19:27:19

Linux——程序地址空间

我们先来看这样一段代码： #include <stdio.h> #include <unistd.h> #include <stdlib.h>int g_val 0;int main() {pid_t id fork();if(id < 0){perror("fork");return 0;}else if(id 0){ //child,子进程肯定先跑完，也…...

编程日记 2024/3/20 19:26:14

Linux编程4.9 网络编程-建立连接

1、TCP的连接与断开三次握手与四次挥手 2、服务器端并发性处理 2.1 多进程模型一个父进程，多个子进程父进程负责等待并接受客户端连接子进程: 完成通信，接受一个客户端连接，就创建一个子进程用于通信。 2.2 多线程模型多线程服务器是…...

编程日记 2024/3/20 19:24:11

威胁检测与分析--云图大师

威胁检测与分析--云图大师当 Internet 在 1960 年代创建时，被设想为一个革命性的计算机网络，供几千名研究人员使用。创建这个快速可靠的网络使用了许多资源，其开发人员考虑的安全措施主要是为了防止军事威胁和潜在的强大入侵者。在那个时代…...

编程日记 2024/3/20 19:22:09

Python基础入门 --- 7.函数

Python基础入门第七章： 7.函数 7.1 函数多返回值按照返回值顺序，写对应顺序的多个变量接收，变量之间用逗号分隔，支持不同数据类型return def test_return():return 1,"hello", Truex, y, z test_return() print…...

编程日记 2024/3/20 19:21:08

第4周 Python程序流程控制刷题

单击题目，直接跳转到页面刷题，一周后公布答案。 B2050：三角形判断B2037：奇偶数判断B2039：整数大小比较P5711：闰年判断P5714：肥胖问题B2043：判断能否被 3，5，7…...

编程日记 2024/3/20 19:20:06

高亮搜索中的关键字怎么实现

在前端实现搜索关键字高亮，通常涉及到对页面上的文本内容进行操作，并使用CSS来改变这些内容的样式。以下是一个基本的步骤和示例，说明如何实现这一功能： HTML结构：首先，你需要在HTML中设置一个搜索框和一个…...

编程日记 2024/3/20 19:18:05

OpenCV系列文章目录（持续更新中......）

引言： OpenCV是一个开源的计算机视觉库，由英特尔公司开发并开源的一组跨平台的C函数和少量的C函数组成，用于实时图像处理、计算机视觉和机器学习等应用领域。OpenCV可以在包括Windows、Linux、macOS等各种操作系统平台上使用，具…...

编程日记 2024/3/20 19:14:01

【机器学习系列】M3DM工业缺陷检测部署与训练

一.基础资料 1.Git 地址地址 2.issues issues 3.参考参考 csdn 二.服务器信息 1.GPU 服务器 GPU 服务器自带 CUDA 安装(前提是需要勾选上)CUDA 需要选择大于 11.3 的版本登录服务器后会自动安装 GPU 驱动 2.CUDA 安装 GPU 服务器自带 CUDA CUDA 版本查看 3.登录信…...

编程日记 2024/3/20 19:05:53

西瓜书机器学习AUC与ℓ-rank（loss）的联系理解以及证明（通俗易懂）

前言在学习到这部分时，对 ℓ-rank 以及AUC的关系难以理解透彻，在网上看到其他博主也并未弄明白，大家大多写自己的理解，我希望您在看完这篇文章时能够深刻理解这二者的关系，如果我的理解有误，希望您在评论…...

编程日记 2024/3/20 19:03:50

8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂（如抗体、抑制肽）在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上，高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术，但这类方法普遍面临资源消耗巨大、研发周期冗长…...

编程新知 2025/9/8 17:56:14

【位运算】消失的两个数字（hard）

消失的两个数字（hard） 题⽬描述：解法（位运算）：Java 算法代码：更简便代码题⽬链接：⾯试题 17.19. 消失的两个数字题⽬描述： 给定⼀个数组，包含从 1 到 N 所有…...

编程新知 2025/7/8 4:43:23

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真题 ( 满分 1 0 0 分时间 1 2 0 分钟 ) 一、单选题(每题只有一个正确答案，答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录【答案】: D 2.1864年，()预言了电磁波的存在，并指出…...

编程新知 2025/7/25 10:29:46

全球首个30米分辨率湿地数据集(2000—2022)

数据简介今天我们分享的数据是全球30米分辨率湿地数据集，包含8种湿地亚类，该数据以0.5X0.5的瓦片存储，我们整理了所有属于中国的瓦片名称与其对应省份，方便大家研究使用。该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

编程新知 2025/9/10 4:00:44

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

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

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

NXP S32K146 T-Box 携手 SD NAND（贴片式TF卡）：驱动汽车智能革新的黄金组合

在汽车智能化的汹涌浪潮中，车辆不再仅仅是传统的交通工具，而是逐步演变为高度智能的移动终端。这一转变的核心支撑，来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒（T-Box）方案：NXP S32K146 与…...

编程新知 2025/9/7 13:06:36

宇树科技，改名了！

提到国内具身智能和机器人领域的代表企业，那宇树科技（Unitree）必须名列其榜。最近，宇树科技的一项新变动消息在业界引发了不少关注和讨论，即： 宇树向其合作伙伴发布了一封公司名称变更函称，因…...

编程新知 2025/9/10 3:34:26

AI语音助手的Python实现

引言语音助手（如小爱同学、Siri）通过语音识别、自然语言处理（NLP）和语音合成技术，为用户提供直观、高效的交互体验。随着人工智能的普及，Python开发者可以利用开源库和AI模型，快速构建自定义语音助手。本文由浅入深，详细介绍如何使用Python开发AI语音助手，涵盖基础功…...

编程新知 2025/9/7 8:48:57

什么是VR全景技术

VR全景技术，全称为虚拟现实全景技术，是通过计算机图像模拟生成三维空间中的虚拟世界，使用户能够在该虚拟世界中进行全方位、无死角的观察和交互的技术。VR全景技术模拟人在真实空间中的视觉体验，结合图文、3D、音视频等多媒体元素…...

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

用鸿蒙HarmonyOS5实现中国象棋小游戏的过程

下面是一个基于鸿蒙OS (HarmonyOS) 的中国象棋小游戏的实现代码。这个实现使用Java语言和鸿蒙的Ability框架。 1. 项目结构 /src/main/java/com/example/chinesechess/├── MainAbilitySlice.java // 主界面逻辑├── ChessView.java // 游戏视图和逻辑├──…...

编程新知 2025/8/18 11:32:48

一、C3新增选择器

1) 属性选择器

1.[class^='className']

2.tag[class^='className']

3.tag[class$='className']

4.tag[class*='className']

5.input[type='typeName']

2)伪类选择器

1.first-child

2.last-child

3.nth-child(n) 与 nth-of-type(n)

3)其他选择器

1.empty

2.not('className')

3.+相邻选择器

4.~兄弟选择器

二、盒子模型box-sizing

1.content-box

2.border-box

相关文章：