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

css基础（1）

news 2026/2/2 20:37:44

CSS

CCS Syntax

CSS 规则由选择器和声明块组成。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

CSS选择器

CSS选择器用于查找想要设置样式的HTML元素

一般选择器分为五类

Simple selectors (select elements based on name, id, class)

简单选择器（根据名称、id、类选择元素）

//页面上的所有 <p> 元素都将居中对齐，文本颜色为红色：
p{text-align:center;color:red;
}

元素的 id 在页面内是唯一的，因此 id 选择器用于选择一个唯一的元素！

要选择具有特定 id 的元素，请写入井号 (#) 字符，后跟该元素的 id。

<!DOCTYPE html>
<html>
<head>
<style>
#ww {text-align: center;color: red;
}
</style>
</head>
<body><p id="para1">Hello World!</p>
<p id="ww">This paragraph is not affected by the style.</p></body>
</html>

Combinator selectors (select elements based on a specific relationship between them)

组合选择器（根据元素之间的特定关系选择元素）一个 CSS 选择器可以包含多个简单选择器。在简单的选择器之间，我们可以包含一个组合器。

CSS 中有四种不同的组合器：

descendant selector (space)

后代选择器（空格）

以下示例选择

元素内的所有

元素

div p {background-color: yellow;
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

child selector (>) 子选择器 (>)

子选择器选择作为指定元素的子元素的所有元素。

以下示例选择作为

元素子级的所有

元素：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

adjacent sibling selector (+)相邻同级选择器 (+)

相邻同级选择器用于选择直接位于另一个特定元素之后的元素。兄弟元素必须具有相同的父元素，“相邻”意味着“紧随其后”。以下示例选择紧邻

元素之后放置的第一个

元素：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

general sibling selector (~)通用兄弟选择器 (~)

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

Pseudo-class selectors 伪类选择器

伪类选择器（根据某种状态选择元素）

A pseudo-class is used to define a special state of an element.
伪类用于定义元素的特殊状态。

For example, it can be used to:
例如，它可用于：

  • Style an element when a user mouses over it
    当用户将鼠标悬停在元素上时设置元素的样式
  • Style visited and unvisited links differently
    访问过的链接和未访问过的链接的样式不同
  • Style an element when it gets focus
    当元素获得焦点时设置其样式

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  1. :link - 这个伪类针对的是尚未被访问过的链接。在您的 CSS 中，未访问的链接被设置为红色。

  2. :visited - 这个伪类适用于用户已经访问过的链接。使用绿色来为已访问的链接着色，使其与未访问的链接区分开来。

  3. :hover - 当鼠标指针悬停在链接上时应用此状态。它临时将链接的颜色改变为亮粉色，通过提供视觉反馈来增强用户互动。

  4. :active - 这个伪类在链接被点击的瞬间生效。通过在活动状态时改变颜色为蓝色，它给出了一个视觉提示，表示链接正在被交互。

您的代码中还包括了关于这些伪类在 CSS 中的排序的重要说明：

  • :hover 状态必须在 :link 和 :visited 之后定义，以确保其正确工作。这是因为 CSS 规则是按定义的顺序应用的，:hover 需要覆盖 :link 和 :visited 定义的颜色。
  • 类似地，:active 必须在 :hover 之后定义，以确保在链接被点击时它能够取得优先权，覆盖任何悬停效果。

这种结构化的方法确保每个状态都有明显的视觉表现，增强了网页导航的可用性和美观性。您的设置正确地遵循了 CSS 的特异性和顺序规则，以实现对超链接状态的期望效果。

Pseudo-elements selectors 伪元素选择器

伪元素选择器（选择元素的一部分并设置其样式）

A CSS pseudo-element is used to style specified parts of an element.
CSS 伪元素用于设置元素的指定部分的样式。

For example, it can be used to:
例如，它可用于：

  • Style the first letter, or line, of an element
    设置元素的第一个字母或行的样式
  • Insert content before, or after, the content of an element
    在元素内容之前或之后插入内容
::first-line 伪元素
::first-letter Pseudo-element
Pseudo-elements and HTML Classes
Multiple Pseudo-elements
CSS - ::before 伪元素
CSS - ::after 伪元素
CSS - ::marker 伪元素
CSS - ::selection 伪元素

Attribute selectors 属性选择器

属性选择器（根据属性或属性值选择元素）

CSS

CCS Syntax

CSS 规则由选择器和声明块组成。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

CSS选择器

CSS选择器用于查找想要设置样式的HTML元素

一般选择器分为五类

Simple selectors (select elements based on name, id, class)

简单选择器（根据名称、id、类选择元素）

//页面上的所有 <p> 元素都将居中对齐，文本颜色为红色：
p{text-align:center;color:red;
}

元素的 id 在页面内是唯一的，因此 id 选择器用于选择一个唯一的元素！

要选择具有特定 id 的元素，请写入井号 (#) 字符，后跟该元素的 id。

<!DOCTYPE html>
<html>
<head>
<style>
#ww {text-align: center;color: red;
}
</style>
</head>
<body><p id="para1">Hello World!</p>
<p id="ww">This paragraph is not affected by the style.</p></body>
</html>

Combinator selectors (select elements based on a specific relationship between them)

组合选择器（根据元素之间的特定关系选择元素）一个 CSS 选择器可以包含多个简单选择器。在简单的选择器之间，我们可以包含一个组合器。

CSS 中有四种不同的组合器：

descendant selector (space)

后代选择器（空格）

以下示例选择

元素内的所有

元素

div p {background-color: yellow;
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

child selector (>) 子选择器 (>)

子选择器选择作为指定元素的子元素的所有元素。

以下示例选择作为

元素子级的所有

元素：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

adjacent sibling selector (+)相邻同级选择器 (+)

相邻同级选择器用于选择直接位于另一个特定元素之后的元素。兄弟元素必须具有相同的父元素，“相邻”意味着“紧随其后”。以下示例选择紧邻

元素之后放置的第一个

元素：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

general sibling selector (~)通用兄弟选择器 (~)

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

Pseudo-class selectors 伪类选择器

伪类选择器（根据某种状态选择元素）

A pseudo-class is used to define a special state of an element.
伪类用于定义元素的特殊状态。

For example, it can be used to:
例如，它可用于：

  • Style an element when a user mouses over it
    当用户将鼠标悬停在元素上时设置元素的样式
  • Style visited and unvisited links differently
    访问过的链接和未访问过的链接的样式不同
  • Style an element when it gets focus
    当元素获得焦点时设置其样式

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  1. :link - 这个伪类针对的是尚未被访问过的链接。在您的 CSS 中，未访问的链接被设置为红色。

  2. :visited - 这个伪类适用于用户已经访问过的链接。使用绿色来为已访问的链接着色，使其与未访问的链接区分开来。

  3. :hover - 当鼠标指针悬停在链接上时应用此状态。它临时将链接的颜色改变为亮粉色，通过提供视觉反馈来增强用户互动。

  4. :active - 这个伪类在链接被点击的瞬间生效。通过在活动状态时改变颜色为蓝色，它给出了一个视觉提示，表示链接正在被交互。

您的代码中还包括了关于这些伪类在 CSS 中的排序的重要说明：

  • :hover 状态必须在 :link 和 :visited 之后定义，以确保其正确工作。这是因为 CSS 规则是按定义的顺序应用的，:hover 需要覆盖 :link 和 :visited 定义的颜色。
  • 类似地，:active 必须在 :hover 之后定义，以确保在链接被点击时它能够取得优先权，覆盖任何悬停效果。

这种结构化的方法确保每个状态都有明显的视觉表现，增强了网页导航的可用性和美观性。您的设置正确地遵循了 CSS 的特异性和顺序规则，以实现对超链接状态的期望效果。

Pseudo-elements selectors 伪元素选择器

伪元素选择器（选择元素的一部分并设置其样式）

A CSS pseudo-element is used to style specified parts of an element.
CSS 伪元素用于设置元素的指定部分的样式。

For example, it can be used to:
例如，它可用于：

  • Style the first letter, or line, of an element
    设置元素的第一个字母或行的样式
  • Insert content before, or after, the content of an element
    在元素内容之前或之后插入内容
::first-line 伪元素
::first-letter Pseudo-element
Pseudo-elements and HTML Classes
Multiple Pseudo-elements
CSS - ::before 伪元素
CSS - ::after 伪元素
CSS - ::marker 伪元素
CSS - ::selection 伪元素

Attribute selectors 属性选择器

属性选择器（根据属性或属性值选择元素）

相关文章：

css基础（1）

CSS CCS Syntax CSS 规则由选择器和声明块组成。 CSS选择器 CSS选择器用于查找想要设置样式的HTML元素 一般选择器分为五类 Simple selectors (select elements based on name, id, class) 简单选择器&#xff08;根据名称、id、类选择元素&#xff09; //页面上的所有 …...

编程日记 2024/7/14 5:20:39

高并发线程池设计Nginx线程池源码剖析

为什么我们需要线程池?Why? 省流&#xff1a; 为了解决: 1.访问磁盘速度慢 2.等待设备工作 3..... 我们使用多线程技术&#xff0c;在IO繁忙的时候优先处理别的任务 为了解决多线程的缺陷: 1.创建、销毁线程时间消耗大 2.创建线程太多使系统资源不足或者线程频繁切换…...

编程日记 2024/7/14 5:19:38

SEO：6个避免被搜索引擎惩罚的策略-华媒舍

在当今数字时代&#xff0c;搜索引擎成为了绝大多数人获取信息和产品的首选工具。为了在搜索结果中获得良好的排名&#xff0c;许多网站采用了各种优化策略。有些策略可能会适得其反&#xff0c;引发搜索引擎的惩罚。以下是彭博社发稿推广的6个避免被搜索引擎惩罚的策略。 1. 内…...

编程日记 2024/7/14 5:18:37

STM32之六：SysTick系统滴答定时器

目录 1. SysTick简介 2. 时钟来源 3. SysTick寄存器 3.1 CTRL—SysTick控制及状态寄存器 3.2 RELOAD—SysTick重装载数值寄存器 3.3 CURRENT—SysTick当前数值寄存器 4. systick系统定时器配置 5. 延时函数实现 5.1 延时函数编写步骤 5.2 微秒级延时函数delay_us 5.…...

编程日记 2024/7/14 5:16:33

全栈物联网项目：结合 C/C++、Python、Node.js 和 React 开发智能温控系统（附代码示例）

1. 项目概述 本文详细介绍了一个基于STM32微控制器和AWS IoT云平台的智能温控器项目。该项目旨在实现远程温度监控和控制,具有以下主要特点: 使用STM32F103微控制器作为主控芯片,负责数据采集、处理和控制逻辑采用DHT22数字温湿度传感器,精确采集环境温湿度数据通过ESP8266 W…...

编程日记 2024/7/14 5:15:32

WPF学习(3) -- 控件模板

一、操作过程 二、代码 <Window x:Class"学习.MainWindow"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d"http://schemas.microsoft.com/expressio…...

编程日记 2024/7/14 5:14:31

Netty Websocket SpringBoot Starter

netty websocket starter Quick Start Demo 项目 添加依赖 <!--添加源--> <repository><id>github</id><url>https://maven.pkg.github.com</url><snapshots><enabled>true</enabled></snapshots> </reposit…...

编程日记 2024/7/14 5:11:28

数据结构(4.2)——朴素模式匹配算法

字符串模式匹配 在主串中找到模式串相同的子串&#xff0c;并返回其所在的位置。 子串和模式串的区别 子串&#xff1a;主串的一部分&#xff0c;一定存在 模式串&#xff1a;不一定能在主串中找到 字符串模式匹配 朴素模式匹配算法 主串长度为n&#xff0c;模式串长度为…...

编程日记 2024/7/14 5:09:26

git切换远程仓库地址

git 更换远程仓库地址三种方法总结 一、前言 由于之前项目管理使用私服的 gitlab &#xff0c;现在换成了Gitea&#xff0c;需要修改远端仓库地址。 二、环境 windows 10git version 2.34.0.windows.1 三、帮助文档 GitHub文档 四、三种修改方法 方法一&#xff1a;不删除远程仓…...

编程日记 2024/7/14 5:06:23

同步与异步：.NET 中的 Task.WaitAll 和 Task.WhenAll

在 C# 中&#xff0c;异步编程通常涉及同时运行多个任务。处理多个任务的两种常见方法是 Task.WaitAll 和 Task.WhenAll。虽然它们看起来很相似&#xff0c;但它们的用途不同&#xff0c;并且用于不同的场景。本文探讨了 Task.WaitAll 和 Task.WhenAll 之间的区别&#xff0c;并…...

编程日记 2024/7/14 5:05:22

在Linux系统实现瑞芯微RK3588部署rknntoolkit2进行模型转换

一、首先要先安装一个虚拟的环境 安装Miniconda包 Miniconda的官网链接：Minidonda官网 下载好放在要操作的linux系统，我用的是远程服务器的linux系统，我放在whl这个文件夹里面，这个文件夹是我自己创建的 运行安装 安装的操作都是yes就可以了 检查是否安装成功,输入下面…...

编程日记 2024/7/14 5:03:20

【人工智能】Transformers之Pipeline（概述）：30w+大模型极简应用

​​​​​​​ 目录 一、引言 二、pipeline库 2.1 概述 2.2 使用task实例化pipeline对象 2.2.1 基于task实例化“自动语音识别” 2.2.2 task列表 2.2.3 task默认模型 2.3 使用model实例化pipeline对象 2.3.1 基于model实例化“自动语音识别” 2.3.2 查看model与task…...

编程日记 2024/7/14 5:02:19

Jenkins中Node节点与构建任务

目录 节点在 Jenkins 中的主要作用 1. 分布式构建 分布式处理 负载均衡 2. 提供不同的运行环境 多平台支持 特殊环境需求 3. 提高资源利用率 动态资源管理 云端集成 4. 提供隔离和安全性 任务隔离 权限控制 5. 提高可扩展性 横向扩展 高可用性 Jenkins 主服务…...

编程日记 2024/7/14 4:59:15

Leetcode3200. 三角形的最大高度

Every day a Leetcode 题目来源&#xff1a;3200. 三角形的最大高度 解法1&#xff1a;模拟 枚举第一行是红色还是蓝色&#xff0c;再按题意模拟即可。 代码&#xff1a; /** lc appleetcode.cn id3200 langcpp** [3200] 三角形的最大高度*/// lc codestart class Solutio…...

编程日记 2024/7/14 4:58:14

docker运行nginx挂载前端html页面步骤

1.常用docker命令 1.docker ps -a 查看所有容器 2.docker ps查看存活的容器 3.docker rm 删除容器 4.docker stop 停止容器运行 5.docker logs 容器id 查看容器日志 6.docker images 查看镜像 7.docker rmi 删除镜像 8.docker exec nginx nginx -s reload 重新加载conf文件…...

编程日记 2024/7/14 4:56:11

kafka部署以及常用命令详细总结

1环境准备 1.1ip规划 ip: 192.168.1.200 1.2配置主机名 #设置主机名 hostnamectl set-hostname node11.3配置hosts [rootnode1 ~]# cat >> /etc/hosts << EOF192.168.1.200 node1 EOF2部署 2.1安装包准备 将以下安装包从官网下载到本地 jdk-8u371-linux-x6…...

编程日记 2024/7/14 4:55:10

代码随想录算法训练营第29天|LeetCode 134. 加油站、135. 分发糖果、860.柠檬水找零、406.根据身高重建队列

1. LeetCode 134. 加油站 题目链接&#xff1a;https://leetcode.cn/problems/gas-station/description/ 文章链接&#xff1a;https://programmercarl.com/0134.加油站.html 视频链接&#xff1a;https://www.bilibili.com/video/BV1jA411r7WX 思路&#xff1a; 贪心&#xff…...

编程日记 2024/7/14 4:54:09

代理模式(大话设计模式)C/C++版本

代理模式 C #include <iostream> using namespace std;class Subject // Subject 定义了RealSubject和Proxy的共用接口..这样就在任何使用RealSubject的地方都可以使用Proxy { public:virtual void func(){cout << "Subject" << endl;} };class R…...

编程日记 2024/7/14 4:52:06

本人学习保存-macOS打开Navicat提示「“Navicat Premium”已损坏，无法打开。 你应该将它移到废纸篓。」的解决方法

新安装了macOS Ventura&#xff0c;打开Navicat Premium&#xff0c;发现会提示&#xff1a; “Navicat Premium”已损坏&#xff0c;无法打开。 你应该将它移到废纸篓。 遇到这种情况&#xff0c;千万别直接移到废纸篓&#xff0c;是有办法解决的。在这里记录一下解决方案。 …...

编程日记 2024/7/14 4:50:05

《Cross-Image Pixel Contrasting for Semantic Segmentation》论文解读

期刊&#xff1a;TPAMI 年份&#xff1a;2024 摘要 研究图像语义分割问题。目前的方法主要集中在通过专门设计的上下文聚合模块(如空洞卷积、神经注意力)或结构感知的优化目标(如iou样损失)挖掘"局部"上下文&#xff0c;即单个图像中像素之间的依赖关系。然而&…...

编程日记 2024/7/14 4:49:04

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

编程新知 2026/1/21 17:24:23

【HarmonyOS 5.0】DevEco Testing：鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

编程新知 2026/1/28 8:17:53

CentOS下的分布式内存计算Spark环境部署

一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架&#xff0c;相比 MapReduce 具有以下核心优势&#xff1a; 内存计算&#xff1a;数据可常驻内存&#xff0c;迭代计算性能提升 10-100 倍&#xff08;文档段落&#xff1a;3-79…...

编程新知 2026/1/25 13:27:13

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

编程新知 2025/9/24 23:08:17

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

编程新知 2026/1/26 19:12:01

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj&#xff0c;再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

编程新知 2026/1/23 2:13:03

大语言模型（LLM）中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型&#xff08;LLM&#xff09;参数规模的增长&#xff0c;推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长&#xff0c;而KV缓存的内存消耗可能高达数十GB&#xff08;例如Llama2-7B处理100K token时需50GB内存&a…...

编程新知 2026/1/28 1:40:03

Reasoning over Uncertain Text by Generative Large Language Models

https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达，从日常对话到特定领域的文档（例如医学文档）（Heritage 2013；Landmark、Gulbrandsen 和 Svenevei…...

编程新知 2026/1/29 16:47:31

#Uniapp篇：chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

编程新知 2026/1/4 21:36:42

Python+ZeroMQ实战：智能车辆状态监控与模拟模式自动切换

目录 关键点 技术实现1 技术实现2 摘要&#xff1a; 本文将介绍如何利用Python和ZeroMQ消息队列构建一个智能车辆状态监控系统。系统能够根据时间策略自动切换驾驶模式&#xff08;自动驾驶、人工驾驶、远程驾驶、主动安全&#xff09;&#xff0c;并通过实时消息推送更新车…...

编程新知 2025/11/12 0:06:50