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

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

news 2026/2/10 13:43:24

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

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候，遇到了一些问题，记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

编程新知 2026/2/8 20:41:48

python打卡day49

知识点回顾： 通道注意力模块复习空间注意力模块CBAM的定义作业：尝试对今天的模型检查参数数目，并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

编程新知 2026/2/7 5:37:17

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎（Physics Engine） 物理引擎是一种通过计算机模拟物理规律（如力学、碰撞、重力、流体动力学等）的软件工具或库。它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互，广泛应用于游戏开发、动画制作、虚…...

编程新知 2026/2/4 2:08:30

BCS 2025｜百度副总裁陈洋：智能体在安全领域的应用实践

6月5日，2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席，并作《智能体在安全领域的应用实践》主题演讲，分享了在智能体在安全领域的突破性实践。他指出，百度通过将安全能力…...

编程新知 2026/2/1 11:33:19

c#开发AI模型对话

AI模型前面已经介绍了一般AI模型本地部署，直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。微软提供了ML.NET来开发和使用AI模型，但是目前国内可能使用不多，至少实践例子很少看见。开发训练模型就不介绍了&am…...

编程新知 2026/2/1 8:59:45

C++八股 —— 单例模式

文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念线程安全（Thread Safety） 线程安全是指在多线程环境下，某个函数、类或代码片段能够被多个线程同时调用时，仍能保证数据的一致性和逻辑的正确性&#xf…...

编程新知 2025/12/2 3:35:50

CMake控制VS2022项目文件分组

我们可以通过 CMake 控制源文件的组织结构，使它们在 VS 解决方案资源管理器中以“组”（Filter）的形式进行分类展示。 🎯 目标通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总（共4种）方法描述是否推荐…...

编程新知 2025/12/4 15:47:17