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

css基础（1）

news 2026/5/25 14:55:10

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

框架组件识别：从版本号到利用链的渗透实战指南

1. 这不是“扫个版本号”那么简单&#xff1a;框架组件识别在真实渗透中的战略定位 很多人看到“框架组件识别”&#xff0c;第一反应是跑个whatweb、wappalyzer&#xff0c;截图发报告里写一句“识别到Spring Boot 2.6.3”&#xff0c;就算交差了。我干这行十多年&#xff0c;…...

编程新知 2026/5/25 14:27:48

Taotoken的APIKey管理与访问控制功能保障了企业级安全

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 Taotoken的APIKey管理与访问控制功能保障了企业级安全 当团队开始规模化使用大语言模型时&#xff0c;一个核心挑战随之而来&#…...

编程新知 2026/5/25 13:44:19

【仅限首批200家认证用户】DeepSeek v3.2.1重复检测私有化部署补丁包（含GPU内存泄漏热修复+增量扫描加速模块）

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;DeepSeek代码重复检测 DeepSeek-R1 模型在训练过程中引入了严格的代码去重机制&#xff0c;其核心目标是消除训练语料中语义等价或高度相似的代码片段&#xff0c;从而提升模型对真实编程模式的学习能力…...

编程新知 2026/5/25 13:33:14

Elsevier-Tracker：5分钟打造您的学术论文审稿进度监控系统

Elsevier-Tracker&#xff1a;5分钟打造您的学术论文审稿进度监控系统 【免费下载链接】Elsevier-Tracker 项目地址: https://gitcode.com/gh_mirrors/el/Elsevier-Tracker 在科研工作者的日常中&#xff0c;论文审稿进度追踪常常成为消耗时间与精力的隐形负担。每天反…...

编程新知 2026/5/25 13:30:30

告别窗口遮挡：Topit如何让macOS多任务效率提升3倍

告别窗口遮挡&#xff1a;Topit如何让macOS多任务效率提升3倍 【免费下载链接】Topit Pin any window to the top of your screen / 在Mac上将你的任何窗口强制置顶 项目地址: https://gitcode.com/gh_mirrors/to/Topit 你是否曾经因为窗口重叠而频繁切换应用&#xff1…...

编程新知 2026/5/25 11:45:23

Python调用WebAssembly破解APP签名算法实战

1. 这不是“调用JS”&#xff0c;而是把WebAssembly当真实CPU来调试你有没有遇到过这样的情况&#xff1a;抓包看到某资讯APP的请求里&#xff0c;sign参数像雪花一样每秒变一个&#xff0c;长度固定32位&#xff0c;全是小写字母加数字&#xff1b;Fiddler里点开响应&#xff…...

编程新知 2026/5/25 10:50:00

QMCDecode：解锁你的QQ音乐收藏，让加密音频重获自由

QMCDecode&#xff1a;解锁你的QQ音乐收藏&#xff0c;让加密音频重获自由 【免费下载链接】QMCDecode QQ音乐QMC格式转换为普通格式(qmcflac转flac&#xff0c;qmc0,qmc3转mp3, mflac,mflac0等转flac)&#xff0c;仅支持macOS&#xff0c;可自动识别到QQ音乐下载目录&#xff…...

编程新知 2026/5/25 10:36:45

基于仿真数据增强与PINN的TCAD模型参数自动校准方法

1. 项目概述与核心挑战在功率半导体器件的研发流程里&#xff0c;TCAD仿真扮演着“数字实验室”的角色。工程师们通过它&#xff0c;可以在昂贵的流片之前&#xff0c;预测器件的电学特性&#xff0c;优化结构设计。然而&#xff0c;这个“数字实验室”的预测精度&#xff0c;高…...

编程新知 2026/5/25 10:23:40

《当下的力量》前三章深度解读：从思维奴隶到临在大师的觉醒之路

《当下的力量》前三章深度解读&#xff1a;从思维奴隶到临在大师的觉醒之路这是一本不能用大脑读的书&#xff0c;这是一本需要用生命去体验的书。——张德芬前言 在这个信息爆炸、节奏飞快的时代&#xff0c;我们似乎永远活在过去的遗憾和未来的焦虑中。我们的大脑像一台永不停…...

编程新知 2026/5/25 9:41:01

GitHub中文界面终极指南：免费脚本让英文GitHub秒变中文

GitHub中文界面终极指南&#xff1a;免费脚本让英文GitHub秒变中文 【免费下载链接】github-chinese GitHub 汉化插件&#xff0c;GitHub 中文化界面。 (GitHub Translation To Chinese) 项目地址: https://gitcode.com/gh_mirrors/gi/github-chinese 还在为GitHub全英文…...

编程新知 2026/5/25 9:20:42