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

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

news 2026/1/27 19:54:07

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

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端，它允许HTTP与Elasticsearch 集群通信，而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点轻量级&#xff…...

编程新知 2025/11/30 15:33:36

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（二）

HoST框架核心实现方法详解 - 论文深度解读（第二部分）《Learning Humanoid Standing-up Control across Diverse Postures》系列文章：论文深度解读 + 算法与代码分析（二）作者机构：上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学论文主题：人形机器人…...

编程新知 2026/1/20 19:54:35

PHP和Node.js哪个更爽?

先说结论，rust完胜。 php：laravel，swoole，webman，最开始在苏宁的时候写了几年php，当时觉得php真的是世界上最好的语言，因为当初活在舒适圈里，不愿意跳出来，就好比当初活在…...

编程新知 2025/9/14 7:59:52

Java-41 深入浅出 Spring - 声明式事务的支持事务配置 XML模式 XML+注解模式

点一下关注吧！！！非常感谢！！持续更新！！！ 🚀 AI篇持续更新中！（长期更新） 目前2025年06月05日更新到： AI炼丹日志-28 - Aud…...

编程新知 2026/1/15 5:04:15

反射获取方法和属性

Java反射获取方法在Java中，反射（Reflection）是一种强大的机制，允许程序在运行时访问和操作类的内部属性和方法。通过反射，可以动态地创建对象、调用方法、改变属性值，这在很多Java框架中如Spring和Hiberna…...

编程新知 2025/11/9 2:57:17

ABAP设计模式之---“简单设计原则(Simple Design)”

“Simple Design”（简单设计）是软件开发中的一个重要理念，倡导以最简单的方式实现软件功能，以确保代码清晰易懂、易维护，并在项目需求变化时能够快速适应。其核心目标是避免复杂和过度设计，遵循“让事情保…...

编程新知 2026/1/27 18:13:23

JVM 内存结构详解

内存结构运行时数据区： Java虚拟机在运行Java程序过程中管理的内存区域。程序计数器： 线程私有，程序控制流的指示器，分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。每个线程都有一个程序计数…...

编程新知 2026/1/24 11:38:26

深入理解Optional：处理空指针异常

1. 使用Optional处理可能为空的集合在Java开发中，集合判空是一个常见但容易出错的场景。传统方式虽然可行，但存在一些潜在问题： // 传统判空方式 if (!CollectionUtils.isEmpty(userInfoList)) {for (UserInfo userInfo : userInfoList) {…...

编程新知 2025/12/19 19:15:39

数据分析六部曲？

引言上一章我们说到了数据分析六部曲，何谓六部曲呢？ 其实啊，数据分析没那么难，只要掌握了下面这六个步骤，也就是数据分析六部曲，就算你是个啥都不懂的小白，也能慢慢上手做数据分析啦。第一…...

编程新知 2026/1/24 14:56:15

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

相关文章：