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

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

news 2026/4/20 7:16:06

提示：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

别再只调PID了！用STM32的TIMER捕获HALL信号，手把手实现电机速度测量（附代码）

基于STM32定时器的HALL信号捕获与电机速度测量实战指南在无刷电机控制系统中，HALL传感器作为转子位置检测的关键元件，其信号处理精度直接影响速度环的性能表现。许多工程师虽然掌握了PID调节原理，却在硬件信号捕获环节遇到瓶颈——如何从跳变…...

编程新知 2026/4/20 5:55:51

数据科学中的Pandas数据框扩展

在数据科学和机器学习的领域中，处理数据结构往往是日常工作的一部分。尤其是当我们需要处理图结构数据时，构建和操作邻接矩阵是常见任务之一。Pandas作为Python中处理数据的强大工具，提供了许多便捷的方法来操作数据框（DataFrame）。本文将探讨如何使用Pandas高效地扩展数据…...

编程新知 2026/4/20 4:50:42

“Spring Data release train reaches RC station” 是 Spring 官方常用的一种拟人化表达

“Spring Data release train reaches RC station” 是 Spring 官方常用的一种拟人化表达，意指 Spring Data 的某个版本发布周期（Release Train）已进入 Release Candidate（RC）阶段，即“候选发布版”。这表示…...

编程新知 2026/4/20 3:51:17

May协程库与Tokio对比：栈式协程与Future异步模型的差异

May协程库与Tokio对比：栈式协程与Future异步模型的差异【免费下载链接】may rust stackful coroutine library 项目地址: https://gitcode.com/gh_mirrors/ma/may May是一个高性能的栈式协程库，可帮助开发者轻松构建和维护大规模并发程序&#x…...

编程新知 2026/4/20 3:29:03

如何快速扩展Connexion框架功能：插件开发的完整指南【免费下载链接】connexion Connexion is a modern Python web framework that makes spec-first and api-first development easy. 项目地址: https://gitcode.com/gh_mirrors/co/connexion Connexion是一…...

编程新知 2026/4/20 3:24:58

别再让Quartus默认的1GHz时钟坑了你！手把手教你为FPGA点灯工程写SDC约束文件

FPGA时序约束实战：从1GHz陷阱到精准SDC文件编写刚接触FPGA开发的工程师们，在完成第一个点灯工程后往往会遇到一个令人困惑的现象——明明代码逻辑简单清晰，Quartus却报出时序违例的红色警告。这背后隐藏着一个新手容易忽略的关键问题&#x…...

编程新知 2026/4/20 1:39:53

FPGA设计里选乘法器IP还是写RTL？从面积、时序和易用性帮你决策

FPGA乘法器设计决策指南：IP核与RTL方案的深度权衡在数字信号处理、通信系统和图像处理等FPGA应用领域，乘法器作为基础运算单元，其实现方式直接影响着系统性能、资源占用和开发效率。面对Xilinx/Altera提供的成熟IP核与自己编写RTL代码这两种…...

编程新知 2026/4/20 1:23:18

HarmonyOS APP开发实战指南：从入门到精通

引言随着物联网和智能设备的快速发展，鸿蒙操作系统（HarmonyOS）凭借其分布式架构和高效性能，成为移动端开发的新热点。本文基于职位描述的技能要求，聚焦HarmonyOS APP开发，涵盖ArkTS语言、开发框架、实战项目…...

编程新知 2026/4/20 1:00:39

深度剖析：导致AI项目失败的五大核心因素与系统化解决方案

AI项目失败率高企，根源往往不在算法，而在系统性的工程、组织与价值错配。本文将深度剖析五大核心因素，并提供可落地的解决方案。同时，结合CAIE注册人工智能工程师认证的能力框架，说明系统化学习如何帮助从业者规避这些陷阱。一、价值错配：解决了一个“完美”的非问题现…...

编程新知 2026/4/20 0:52:01

TuGraph图数据库：5大核心功能全面解析与快速上手指南

TuGraph图数据库：5大核心功能全面解析与快速上手指南【免费下载链接】tugraph-db TuGraph: A High Performance Graph Database. 项目地址: https://gitcode.com/gh_mirrors/tu/tugraph-db 在当今数据驱动的时代，图数据库正成为处理复杂关系数据…...

编程新知 2026/4/20 0:31:29

一、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

相关文章：