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

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

news 2025/11/19 22:54:29

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

铭豹扩展坞 USB转网口突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别，但在其他电脑上正常工作时，问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤，帮助你快速找到故障原因：背景：一个M-pard（铭豹）扩展坞的网卡突然无法识别了，扩展出来的三个USB接口正常。…...

编程新知 2025/11/18 1:50:32

React Native 开发环境搭建（全平台详解）

React Native 开发环境搭建（全平台详解） 在开始使用 React Native 开发移动应用之前，正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南，涵盖 macOS 和 Windows 平台的配置步骤，如何在 Android 和 iOS…...

编程新知 2025/10/7 2:47:54

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统，支持多语言对话（如中文，英文，日语），语音情感（如开心，悲伤）&#x…...

编程新知 2025/11/17 0:21:11

Springboot社区养老保险系统小程序

一、前言随着我国经济迅速发展，人们对手机的需求越来越大，各种手机软件也都在被广泛应用，但是对于手机进行数据信息管理，对于手机的各种软件也是备受用户的喜爱，社区养老保险系统小程序被用户普遍使用，为方…...

编程新知 2025/11/18 7:27:48

Python 包管理器 uv 介绍

Python 包管理器 uv 全面介绍 uv 是由 Astral（热门工具 Ruff 的开发者）推出的下一代高性能 Python 包管理器和构建工具，用 Rust 编写。它旨在解决传统工具（如 pip、virtualenv、pip-tools）的性能瓶颈，同时…...

编程新知 2025/8/16 15:34:02

LeetCode - 199. 二叉树的右视图

题目 199. 二叉树的右视图 - 力扣（LeetCode） 思路右视图是指从树的右侧看，对于每一层，只能看到该层最右边的节点。实现思路是： 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...

编程新知 2025/9/13 20:07:18

【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的“no matching...“系列算法协商失败问题

【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的"no matching..."系列算法协商失败问题摘要： 近期，在使用较新版本的OpenSSH客户端连接老旧SSH服务器时，会遇到 "no matching key exchange method found", "n…...

编程新知 2025/9/29 4:00:38

C语言中提供的第三方库之哈希表实现

一. 简介前面一篇文章简单学习了C语言中第三方库（uthash库）提供对哈希表的操作，文章如下： C语言中提供的第三方库uthash常用接口-CSDN博客本文简单学习一下第三方库 uthash库对哈希表的操作。二. uthash库哈希表操作示例 u…...

编程新知 2025/11/9 14:40:17

淘宝扭蛋机小程序系统开发：打造互动性强的购物平台

淘宝扭蛋机小程序系统的开发，旨在打造一个互动性强的购物平台，让用户在购物的同时，能够享受到更多的乐趣和惊喜。淘宝扭蛋机小程序系统拥有丰富的互动功能。用户可以通过虚拟摇杆操作扭蛋机，实现旋转、抽拉等动作，增…...

编程新知 2025/11/18 6:23:20

认识CMake并使用CMake构建自己的第一个项目

1.CMake的作用和优势跨平台支持：CMake支持多种操作系统和编译器，使用同一份构建配置可以在不同的环境中使用简化配置：通过CMakeLists.txt文件，用户可以定义项目结构、依赖项、编译选项等，无需手动编写复杂的构建脚本…...

编程新知 2025/11/16 6:59:34

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

相关文章：