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

CSS易漏知识

news 2025/12/15 6:44:11

复杂选择器可以通过（id的个数，class的个数，标签的个数）的形式，计算权重。
如果我们需要将某个选择器的某条属性提升权重，可以在属性后面写!important；注意!importent要写在;前面很多公司不允许使用!important，因为这会带来不经意的样式冲突。

一、复杂选择器

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 权重(2, 0, 1)*/#box1 #box2 p {color: red;}/* 权重(2, 1, 2)*/#box1 div.box2 #box3 p {color: green;}/* 权重(0, 3, 1)*/.box1 .box2 .box3 p {color: blue;}/* 权重(0, 1, 1)*/.list li {color: red;}/* 权重(0, 1, 0)*/.spec {color: blue !important;}</style>
</head><body><div id="box1" class="box1"><div id="box2" class="box2"><div id="box3" class="box3"><p>我是段落</p></div></div></div><ul class="list"><li>列表项</li><li class="spec">列表项</li><li class="spec">列表项</li><li>列表项</li><li>列表项</li><li>列表项</li><li>列表项</li></ul>
</body></html>

二、属性选择器

根据元素的属性值来选择元素，有以下多种匹配方式：

[alt] 有这个属性

[alt = "北京故宫"] 精确匹配

[alt ^= "abc"] 开头匹配

[alt $= "abc"] 结尾匹配

[alt *= "abc"] 任意位置匹配

[alt |= "abc"] abc-开头

[alt ~= "abc"] abc为空格分开的独立部分

三、伪类

伪类是添加到选择器的描述性词语，指定要选择的元素的特殊状态，超级链接有四个特殊状态。

a:link 没有被访问的超级链接

a:visited 已经被访问的超级链接

a:hover 正被鼠标悬停的超级链接

a:active 正被激活的超级链接（按下按键但还没松开按键）

a标签的伪类书写，要按照“爱恨准则”的顺序，否则会有伪类不生效。 LOVEHATE

四、CSS3新增伪类

:empty选择空标签（注意有空格不被视为空标签）

:focus选择当前获得焦点的表单元素

:enabled选择当前有效的表单元素

:disabled选择当前无效的表单元素

:checked选择当前已经勾选的单选按钮或者复选框

:root选择根元素，即<html>标签

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.para {/* 宽度、高度 */width: 100px;height: 100px;/* 边框 */border: 1px solid #000;}.para:empty {background-color: red;}input:focus {background-color: rgb(239, 243, 181);}input:disabled {border: 1px solid #000;}input:enabled {border: 1px solid rgb(17, 84, 209);}/* +表示后面的兄弟元素 */input:checked+span {color: red;}:root {font-size: 20px;}</style>
</head><body><p class="para"></p><p class="para"></p><p class="para">123</p><p class="para"> </p><p><input type="text"><input type="text"><input type="text" disabled><input type="text" disabled><input type="text"></p><p><input type="checkbox"> <span>文字</span><input type="checkbox"> <span>文字</span><input type="checkbox"> <span>文字</span><input type="checkbox"> <span>文字</span></p>
</body></html>

五、伪元素

::before创建一个伪元素，其将成为匹配选中的元素的第一个子元素，必须设置content属性表示其中的内容。

::after创建一个伪元素，其将成为匹配选中的元素的最后一个子元素，必须设置content属性表示其中的内容。

::section

::first-letter会选中某元素中（必须是块级元素）第一行的第一个字母

::first-line会选中某元素中（必须是块级元素）第一行的全部文字

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>a::before {content: "■";}a::after {content: "❤";}.box1 {width: 400px;height: 300px;border: 1px solid #000;}.box1::selection {/* 背景颜色 */background-color: springgreen;color: deeppink;}.box1::first-letter {font-size: 50px;}.box1::first-line {/* 添加下划线 */text-decoration: underline;}</style>
</head><body><p><a href="">我是超级链接</a></p><p><a href="">我是超级链接</a></p><p><a href="">我是超级链接</a></p><div class="box1">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
</body></html>

六、元素关系选择器

>子选择器当使用>号分割两个元素时，他只会匹配那些作为第一个元素的直接后代元素，即两个标签为父子关系。与后代选择器的区别是后代选择器不一定限制是子元素。

div>p div的子标签p

+相邻兄弟选择器，img+p 图片后面紧跟着的段落将被选中。

~通用兄弟选择器，a~b选择a元素之后所有同层级b元素。p~span p元素之后的所有同层级span元素。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box>p {color: red;}img {width: 300px;}img+span {color: green;}h3~span {font-style: italic;}</style>
</head><body><div class="box"><p>我是段落</p><p>我是段落</p><div><p>我是段落</p><p>我是段落</p></div></div><p>我是段落</p><p>我是段落</p><p><img src="images/0.jpg" alt=""><span>这是北京故宫</span></p><p><img src="images/1.jpg" alt=""><span>这是北京鸟巢</span></p><span>你好</span><span>你好</span><h3>我是一个三级标题</h3><span>我是后面的span</span><span>我是后面的span</span><span>我是后面的span</span><span>我是后面的span</span><p>我是一个段落</p><span>我是后面的span</span><span>我是后面的span</span><div><span>多了一个级别span</span><span>多了一个级别span</span></div>
</body></html>

七、文字水平垂直居中

需要分别设置水平和垂直居中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 300px;height: 100px;background-color: orange;font-size: 40px;color: white;/* 水平居中 */text-align: center;/* 垂直居中，行高等于盒子高 */line-height: 100px;}</style>
</head>
<body><div class="box">行胜于言</div>
</body>
</html>

八、text-indent属性

text-indent 是一个CSS属性，用于指定块级元素中第一行文本的缩进量。这个属性可以接受多种单位，包括像素（px）、百分比（%）、em、rem等。

以下是一些使用 text-indent 的例子：

p {text-indent: 20px; /* 文本缩进20像素 */
}h1 {text-indent: 2em; /* 文本缩进当前字体大小的两倍 */
}div {text-indent: 10%; /* 文本缩进父元素宽度的10% */
}

text-indent 的几个关键点：

它只对块级元素的第一行文本有效。
如果值为负数，第一行文本会向左缩进，可能超出其容器的左边框。
它通常用于段落（<p>标签）以创建首行缩进，这在印刷和出版行业中很常见。
text-indent 可以继承，因此应用于父元素的缩进也会应用于子元素，除非子元素有明确的样式覆盖。

这个属性在网页设计中常用于增强文本的排版效果，尤其是在文章或博客文章中，为段落添加首行缩进可以提升阅读体验。

九、margin和padding的区别

margin 和 padding 是CSS中用于控制元素空间布局的两个不同属性，它们的主要区别在于它们控制的是元素的不同区域：

margin：用于设置元素边缘与其周围元素之间的空间。它位于元素的边框之外，是元素盒子模型的一部分。margin 可以接受一到四个值，分别代表上、右、下、左的边距。如果没有指定某个值，它将使用对边的值。

例如，以下CSS规则将设置一个元素的四个边距为0：
```
.element {margin: 0; /* 上右下左的边距都是0 */
}
```
padding：用于设置元素内容与其边框之间的空间。它位于元素的边框之内。与 margin 一样，padding 也可以接受一到四个值。

例如，以下CSS规则将设置一个元素的四个内边距为0：
```
.element {padding: 0; /* 上右下左的内边距都是0 */
}
```

以下是 margin 和 padding 之间的主要区别：

位置：
- margin 位于元素的边框之外。
- padding 位于元素的边框之内。
背景：
- margin 的背景是透明的，不会受到元素背景颜色或背景图像的影响。
- padding 的背景颜色或背景图像与元素本身的背景相同。
布局影响：
- margin 影响元素与周围元素之间的空间，可以用于创建元素之间的间隔。
- padding 影响元素内容与元素边框之间的空间，可以用于增加元素内部的空白区域。
折叠：
- margin 在某些情况下会发生折叠，特别是垂直方向上的相邻元素的相邻边距会合并为一个较大的边距。
- padding 不会发生折叠。
继承：
- margin 通常不继承，即子元素不会继承父元素的 margin 值。
- padding 可以继承，但通常会被子元素的 padding 值覆盖。

在网页设计中，通常将 margin: 0; 和 padding: 0; 用于重置浏览器默认样式，以确保在不同浏览器之间获得一致的布局效果。

十、盒模型的计算

width和height不是盒子的实际长宽而是盒子留给内容的长宽，即实际可用面积（相当于向外踹）。所以盒子的实际宽度是width+padding宽度+border的宽度。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.box {width: 400px;height: 300px;padding: 10px;border: 6px solid blue;margin: 40px auto;}.box .c1 {/* 老大实际占有的宽度是400px，实际占有的高度是200px，并且向下踹20px *//* 它只给老二留下了80px */width: 388px;height: 188px;border: 6px solid green;margin-bottom: 20px;}.box .c2 {/* 老二还剩下什么？剩下了400px宽度、80px高度总空间 */width: 388px;height: 48px;padding: 10px 0;border: 6px solid orange;}</style>
</head><body><div class="box"><div class="c1">1</div><div class="c2">2</div></div>
</body></html>

CSS易漏知识

复杂选择器可以通过（id的个数，class的个数，标签的个数）的形式，计算权重。如果我们需要将某个选择器的某条属性提升权重，可以在属性后面写!important；注意!importent要写在;前面很多公司不允许…...

编程日记 2024/10/27 6:07:18

【10天速通Navigation2】(三) ：Cartographer建图算法配置：从仿真到实车，从原理到实现

前言往期内容： 第一期：【10天速通Navigation2】(一) 框架总览和概念解释第二期：【10天速通Navigation2】(二) ：ROS2gazebo阿克曼小车模型搭建-gazebo_ackermann_drive等插件的配置和说明本教材将贯穿nav2的全部内容&#xff0c…...

编程日记 2024/10/27 6:06:15

测试造数，excel转insert语句

目录 excel转sql的insert语句一、背景二、直接上代码 excel转sql的insert语句一、背景在实际测试工作中，需要频繁地进行测试造数并插入数据库验证，常规的手写sql语句过于浪费时间，为此简单写个脚本，通过excel来造数&#xff0…...

编程日记 2024/10/27 6:05:14

Python 应用可观测重磅上线：解决 LLM 应用落地的“最后一公里”问题

作者：彦鸿背景随着 LLM（大语言模型）技术的不断成熟和应用场景的不断拓展，越来越多的企业开始将 LLM 技术纳入自己的产品和服务中。LLM 在自然语言处理方面表现出令人印象深刻的能力。然而，其内部机制仍然不明确&am…...

编程日记 2024/10/27 6:04:12

从零开始：用Spring Boot搭建厨艺分享网站

2 相关技术 2.1 Spring Boot框架简介 Spring Boot是由Pivotal团队提供的全新框架，其设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置，从而使开发人员不再需要定义样板化的配置。通过这种方式，Sprin…...

编程日记 2024/10/27 6:03:09

《2024中国泛娱乐出海洞察报告》解析，垂直且多元化方向发展！

随着以“社交”为代表的全球泛娱乐市场规模不断扩大以及用户需求不断细化，中国泛娱乐出海产品正朝着更加垂直化、多元化的方向发展。基于此，《2024中国泛娱乐出海洞察报告》深入剖析了中国泛娱乐行业出海进程以及各细分赛道出海现状及核心特征。针对中国…...

编程日记 2024/10/27 6:00:02

强化学习数学原理学习(一)

前言总之开始学! 正文先从一些concept开始吧,有一个脉络比较好 state 首先是就是状态和状态空间,显而易见,不多说了 action 同理,动作和动作空间 state transition 状态转换,不多说 policy 策略,不多说 reward 奖励,不多说 MDP(马尔科夫) 这里需要注意到就是这个是无…...

编程日记 2024/10/27 5:56:59

获 Sei 基金会投资的 MetaArena ：掀起新一轮链上游戏革命

MetaArena 是一个综合性的 Web3 游戏开发和发布平台，集成了最先进的技术架构，包括 Unreal Engine 5.3、去中心化虚拟资产交易市场和分布式计算资源支持。平台不仅为开发者提供了高效的开发工具，还通过跨链功能和 AI 模块，极大简化…...

编程日记 2024/10/27 5:55:58

react-signature-canvas 实现画笔与橡皮擦功能

react-signature-canvas git 地址代码示例 import React, { Component } from react import { createRoot } from react-dom/clientimport SignaturePad from ../../src/index.tsximport * as styles from ./styles.module.cssclass App extends Component {state { trimmed…...

编程日记 2024/10/27 5:52:54

004:ABBYY PDF Transformer安装教程

引言：本文主要讲解。一、软件介绍 ABBYY PDF Transformer由ABBYY公司出品，属于一款家庭及商业都适用的PDF文档转换工具。它结合了ABBYY的OCR（光学字符识别）技术和Adobe PDF库技术，以确保能够便捷地处理任何类型的PDF…...

编程日记 2024/10/27 5:51:53

FlinkSQL之temporary join开发

在实时开发中，双流join获取目标对应时刻的属性时，经常使用temporary join。笔者在流量升级的实时迭代中，需要让流量日志精准的匹配上浏览时间里对应的商品属性，使用temporary join开发过程中踩坑不少，将一些经验沉淀在…...

编程日记 2024/10/27 5:50:52

第二十六节直方图均衡化

图像直方图均衡化图像直方图均衡化可以增强图像增强，对输入图像进行直方图均衡化处理，提升后续对象检测的准确率在Opencv人脸检测的代码演示中已经很常见了，此外对医学影像图像与卫星遥感图像也经常通过直方图均衡化来提升图像质量 Opencv…...

编程日记 2024/10/27 5:49:51

工单管理用什么工具好？8款推荐清单

本文推荐的8款项目工单管理系统有:1. PingCode; 2.Worktile; 3.Teambition; 4.致远OA; 5.TAPD; 6.Gitee; 7.Wrike; 8.Trello。很多企业在处理项目工单时，依然依赖电子邮件、Excel表格，甚至是手动记录。这样做不仅效率低下，还容易导致工单遗漏…...

编程日记 2024/10/27 5:47:49

工地安全新突破：AI视频监控提升巡检与防护水平

在建筑工地和其他劳动密集型行业，工人的安全一直是管理工作的重中之重。为了确保工地的安全管理更加高效和智能化，AI视频监控卫士。通过人工智能技术，系统不仅能实时监控，还能自动识别工地现场的安全隐患，为工地管理者…...

编程日记 2024/10/27 5:46:48

World of Warcraft [CLASSIC][80][the Ulduar]

Ulduar 奥杜尔副本介绍奥杜尔共计14个BOSS，通常说的10H就是10个苦难模式就是全通，9H就是除了【观察者奥尔加隆】，特别说明开启【观察者奥尔加隆】，是需要打掉困难模式4个守护者的。所以人们经常说的类似“10H 观察者”、“10H…...

编程日记 2024/10/27 5:44:46

python实现数据库的增删改查功能，图形化版本

import tkinter from tkinter import * import psycopg2 from tkinter import messagebox#连接信息 t_conn{"dbname": "d1","user": "u1","password": "123qqq...A","port": "15400","h…...

编程日记 2024/10/27 5:43:44

pipeline开发笔记

pipeline开发笔记 jenkins常用插件Build Authorization Token Root配置GitLab的webhooks(钩子)配置构建触发器--示例 piblish over sshBlue OceanWorkspace Cleanup PluginGit插件PipelineLocalization: Chinese (Simplified) --中文显示Build Environment Plugin 显示构建过程…...

编程日记 2024/10/27 5:42:43

spark读取parquet文件

源码 parquet文件读取的入口是FileSourceScanExec，用parquet文件生成对应的RDD 非bucket文件所以走createNonBucketedReadRDD方法。 createNonBucketedReadRDD 过程： 确定文件分割参数 openCostInBytes4M 相关参数spark.sql.files.openCostInBytes4M…...

编程日记 2024/10/27 5:41:42

redis详细教程（1.String类型）

Redis 的 String 类型内部使用了一种叫做 SDS（Simple Dynamic String）的结构。SDS 的设计比传统的 C 语言字符串更加高效和安全，主要特点如下： 头部信息：SDS 的头部包含了一些元数据，比如字符串的长度、剩…...

编程日记 2024/10/27 5:39:41

用友U8接口-库存管理(7)

概括本文的操作需要正确部署U8API主要讲述库存管理接口的使用，以产成品入库单作为说明，其他单据接口都是大同小异的！许多时候先在ERP做个单，然后仿造ERP单据参数，构造接口JSON参数是不错的做法。获取Token访问令牌…...

编程日记 2024/10/27 5:38:40

【JavaEE】-- HTTP

1. HTTP是什么？ HTTP（全称为"超文本传输协议"）是一种应用非常广泛的应用层协议，HTTP是基于TCP协议的一种应用层协议。应用层协议：是计算机网络协议栈中最高层的协议，它定义了运行在不同主机上…...

编程新知 2025/12/10 2:57:55

AI Agent与Agentic AI：原理、应用、挑战与未来展望

文章目录一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程三、AI Agent的核心技术栈解密3.1 感知模块代码示例：使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例：使用OpenAI GPT-3进…...

编程新知 2025/12/10 10:18:18

蓝桥杯 2024 15届国赛 A组儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐题目描述五彩斑斓的气球在蓝天下悠然飘荡，轻快的音乐在耳边持续回荡，小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下，六一来了。今天是六一儿童节，小蓝老师为了让大家在节…...

编程新知 2025/12/5 2:40:04

【大模型RAG】Docker 一键部署 Milvus 完整攻略

本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装；只需暴露 19530（gRPC）与 9091（HTTP/WebUI）两个端口，即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...

编程新知 2025/12/8 20:02:18

Rust 异步编程

Rust 异步编程引言 Rust 是一种系统编程语言，以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天，异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。异步编程基础什么是异步…...

编程新知 2025/11/17 18:58:56

【Java_EE】Spring MVC

目录 Spring Web MVC 编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递注意事项编辑参数重命名 RequestParam 编辑编辑传递集合 RequestParam 传递JSON数据编辑RequestBody …...

编程新知 2025/12/12 6:00:18

基于Java+VUE+MariaDB实现（Web）仿小米商城

仿小米商城环境安装 nodejs maven JDK11 运行 mvn clean install -DskipTestscd adminmvn spring-boot:runcd ../webmvn spring-boot:runcd ../xiaomi-store-admin-vuenpm installnpm run servecd ../xiaomi-store-vuenpm installnpm run serve 注意：运行前…...

编程新知 2025/12/11 3:33:22