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

CSS易漏知识

news 2025/7/12 16:22:41

复杂选择器可以通过（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

超短脉冲激光自聚焦效应

前言与目录强激光引起自聚焦效应机理超短脉冲激光在脆性材料内部加工时引起的自聚焦效应，这是一种非线性光学现象，主要涉及光学克尔效应和材料的非线性光学特性。自聚焦效应可以产生局部的强光场，对材料产生非线性响应，可能…...

编程新知 2025/7/9 2:28:03

在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能

下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能，包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

编程新知 2025/6/21 3:36:25

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器，其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机（Virtual Host）。 1. 简介 Nginx 使用 server_name 指令来确定…...

编程新知 2025/6/17 10:29:06

数据链路层的主要功能是什么

数据链路层（OSI模型第2层）的核心功能是在相邻网络节点（如交换机、主机）间提供可靠的数据帧传输服务，主要职责包括： 🔑 核心功能详解： 帧封装与解封装封装： 将网络层下发…...

编程新知 2025/6/16 23:36:50

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

编程新知 2025/7/11 20:55:10

让回归模型不再被异常值“带跑偏“，MSE和Cauchy损失函数在噪声数据环境下的实战对比

在机器学习的回归分析中，损失函数的选择对模型性能具有决定性影响。均方误差（MSE）作为经典的损失函数，在处理干净数据时表现优异，但在面对包含异常值的噪声数据时，其对大误差的二次惩罚机制往往导致模型参数…...

编程新知 2025/7/11 21:26:03

视觉slam十四讲实践部分记录——ch2、ch3

ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件，或者在构建过程中仍然引用了旧的路…...

编程新知 2025/7/12 9:45:38

Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战

说明：这是一个机器学习实战项目（附带数据代码文档），如需数据代码文档可以直接到文章最后关注获取。 1.项目背景在金融市场日益复杂和波动加剧的背景下，风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...

编程新知 2025/7/12 0:11:46

深入浅出深度学习基础：从感知机到全连接神经网络的核心原理与应用

文章目录前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么？1.1.2 感知机的工作原理 1.2 感知机的简单应用：基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...

编程新知 2025/7/9 22:58:14

C/C++ 中附加包含目录、附加库目录与附加依赖项详解

在 C/C 编程的编译和链接过程中，附加包含目录、附加库目录和附加依赖项是三个至关重要的设置，它们相互配合，确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中，这些概念容易让人混淆，但深入理解它们的作用和联…...

编程新知 2025/7/8 12:50:06