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

17.CSS伪类

举一个简单的例子来说明什么是伪类?
从之前的代码中,如下图,我们像给这两个列表中的某一列单独设置样式,我们该如何做呢?
在这里插入图片描述

我们肯定会选择在li标签上添加class去实现,如下

  1. 开始标记
  2. 结束标记
  3. 实际元素
<ul><li class="first-li">能够使用基本的 Web 开发语言</li><li>手工制作漂亮的网站,而不是依赖像 Wordpress 或 Wix 这样的工具</li><li>构建 Web 应用程序</li><li>给朋友留下深刻印象</li><li>玩得开心😃</li></ul>

在这里插入图片描述

● 之后添加CSS代码即可

.first-li {
font-weight: bold;
}

在这里插入图片描述

但是我们有更好的方法去实现此类目的,使用伪元素
#CSS中添加:

li:first-child {
font-weight: bold;
}
这样仍然可以实现!
我们可以看作

    • 是我们的父类,而
    • 是孩子child,第一个孩子就是first-child

举一反三,现在如果像让最后一个元素是斜体,我们可以这样去写。
li:last-child {
font-style: italic;
}

● 当然,我们也可以随意指定一个li元素,给与附加单独样式,例如我想要第二个li元素
li:nth-child(2) {
color: red;
}

在这里插入图片描述

除了上述,还有其他用法:
● 将奇数的li元素设置为红色
li:nth-child(odd) {
color: red;
}
● 将偶数的li元素设置为红色
li:nth-child(even) {
color: red;
}

按照以上方式设置段落
● 例如我们想给文章的第一个P标签给予红色样式
在这里插入图片描述

我们会这样写。
article p:first-child {
color: red;
}
但是这样并不会奏效!!!

● 看下尾部,写上就会奏效
在这里插入图片描述

article p:last-child {
color: red;
}

在这里插入图片描述

这是为什么呢?
注意:article p:first-child我们并不能理解为是aritcle的第一个P标签的"孩子",而是aritcle的第一个"孩子",由于article的第一个孩子不是p标签,故而没有生效。而最后一个标签是p标签,故而last-child可以生效。所以,当父元素中又很多不同的子元素,伪类就不能很好的工作。

相关文章:

17.CSS伪类

举一个简单的例子来说明什么是伪类&#xff1f; 从之前的代码中&#xff0c;如下图&#xff0c;我们像给这两个列表中的某一列单独设置样式&#xff0c;我们该如何做呢&#xff1f; 我们肯定会选择在li标签上添加class去实现&#xff0c;如下 开始标记结束标记实际元素 <…...

数据链路层

一.以太网数据链路层考虑的是相邻两个节点&#xff08;通过网线/光纤、无线直接相连的两个设备&#xff09;之间的传输&#xff0c;这里的典型协议中最知名的就是“以太网”这个协议了数据链路层&#xff0c;也规定了物理层的内容以太网帧格式&#xff1a;IP地址用来描述整个传…...

投票需要什么流程微信投票互助平台的免费投票平台搭建

“最美家政人”网络评选投票_免费小程序投票推广_小程序投票平台好处手机互联网给所有人都带来不同程度的便利&#xff0c;而微信已经成为国民的系统级别的应用。现在很多人都会在微信群或朋友圈里转发投票&#xff0c;对于运营及推广来说找一个合适的投票小程序能够提高工作效…...

数据结构——算法的时间复杂度

&#x1f307;个人主页&#xff1a;_麦麦_ &#x1f4da;今日名言&#xff1a;生命中曾经有过的所有灿烂&#xff0c;都终究需要用寂寞来偿还。——《百年孤独》 目录 一、前言 二、正文 1.算法效率 1.1如何衡量一个算法的好坏 1.2算法的复杂度 2. 时间复杂度 2.1时间复杂度的…...

Go基础-类型

文章目录1 bool2 有符号整数3 无符号整数4 浮点数5 复数6 string7 关于类型转型1 bool bool类型有两个值&#xff0c;一个是true&#xff0c;一个是false。 测试 package mainimport "fmt"func main() {a : trueb : falsec : a && bd : a || bfmt.Println(a…...

良许翻天覆地的2022年

大家好&#xff0c;我是良许&#xff0c;新年快乐呀~ 在我女室友坚持不懈的努力之下&#xff0c;2022年的最后一天我终于被她传染了&#xff0c;阳了~ 此时的我&#xff0c;正顶着37多度的低烧写下这篇年终总结。 2022年&#xff0c;对于大多数人而言&#xff0c;封控是主旋…...

node+vue微信小程序的社区后勤报修系统

社区后勤报修系统小程序进行总体设计和详细设计。总体设计主要包括小程序功能设计、小程序总体结构设计、小程序数据结构设计和小程序安全设计等&#xff1a;详细设计主要包括社区后勤报修系统小程序数据库访问的实现,主要功能模块的具体实现,模块实现关键代码等。最后对社区后…...

WSL(Windows Subsystem for Linux)

一、WSL优势 •传统方式&#xff1a;获取Linux操作系统环境&#xff0c;必须安装完整的虚拟机&#xff0c;如VMware•WSL&#xff1a;以非常轻量化的方式&#xff0c;得到Linux系统环境总结&#xff1a;WSL更方便&#xff0c;简单、好用、轻量化、省内存 二、什么是WSL ①不…...

华为OD机试题 - 单词反转(JavaScript)

最近更新的博客 华为OD机试题 - 任务总执行时长(JavaScript) 华为OD机试题 - 开放日活动(JavaScript) 华为OD机试 - 最近的点 | 备考思路,刷题要点,答疑 【新解法】 华为OD机试题 - 最小步骤数(JavaScript) 华为OD机试题 - 任务混部(JavaScript) 华为OD机试题 - N 进…...

人工智能原理复习 | 产生式系统的搜索策略

文章目录 一、回溯策略二、图搜索策略三、A 算法与 A* 算法CSDN 叶庭云:https://yetingyun.blog.csdn.net/ 主要内容:回溯策略、图搜索策略(无信息的图搜索、启发式的图搜索)、A 算法与 A* 算法 一、回溯策略 回溯算法(BackTracking Algorithm) 实际上是一个类似枚举的搜…...

初始C语言 - 数组(一维数组、二维数组、数组越界、数组传参)

目录 一、一维数组的创建和初始化 1、数组的创建 2、 数组的初始化 3.一维数组的使用 数组通过下标来访问 总结: 1. 数组是使用下标来访问的&#xff0c;下标是从0开始。 2. 数组的大小可以通过计算得到。 4、一维数组在内存中的存储 二、 二维数组的创建和初始化 1.二…...

人工智能原理复习 | 可分解产生式系统的搜索策略

文章目录 一、前言二、基础知识三、AO* 算法四、博弈树搜索五、总结CSDN 叶庭云:https://yetingyun.blog.csdn.net/ 主要内容: 与 / {/} /或图搜索、AO* 算法、极大极小过程、...

线段树(维护区间信息)

一&#xff0c;定义&#xff1a; 可以在logN时间内实现区间修改&#xff0c;单点修改&#xff0c;区间查询等操作的工具 二&#xff0c;思路&#xff08;修改无乘法时&#xff09;&#xff1a; 1&#xff0c;建树 通过把区间不断二分建立一颗二叉树 我们以维护一个数组a{1…...

C语言 基于Ncurse库的贪吃蛇游戏项目

为了敲键盘及时响应&#xff0c;需要用到ncurse 测试代码&#xff1a; ncurse1.c /* ncurse1.c */ #include <curses.h> //ncurse的头文件。int main() {char c;int i 0;//ncurse界面的初始化函数。initscr(); for(i0;i<2;i){c getch();printw("\n");//…...

【Java基础】Java语言特性

认识Java java语言的执行过程 编写纯文本文件 .java 经过javac编译器(java complier)编译 .class .class是二进制的字节码 在源文件中定义几个类&#xff0c;就会生成几个 由JVM运行 .class JVM把字节码编译成可以在处理器上运行的高性能的本地代码&#xff08;native code),…...

python进阶--Numyp库(一)

一、Numpy库介绍 NumPy&#xff08;Numerical Python&#xff09;是Python的⼀种开源的数值计算扩展。提供多维数组对象&#xff0c;各种派⽣对象&#xff08;如掩码数组和矩阵&#xff09;&#xff0c;这种⼯具可⽤来存储和处理⼤型矩阵&#xff0c;⽐Python⾃身的嵌套列表&am…...

CV学习笔记-Inception

CV学习笔记-Inception 目录 文章目录CV学习笔记-Inception目录1. 常见的卷积神经网络2. Inception(1) Inception提出背景(2) Inception module 核心思想3. Inception的历史版本(1) InceptionV1-GoogleNet(2) InceptionV2(3) InceptionV3(4) Inception V44. Inception模型的特点…...

注意力机制笔记——结合沐神和B站老弓up主

B站【大白话浅谈【注意力机制】】 聚类 是针对 样本, 注意力机制是针对样本相关性,来进行计算的 自注意力机制 指的是 query ,key,value都是同一个部分。 可以学到 类似的 短语 ,和 语义特征。如its 指代的对象。 评论区大佬 根据这篇论文《Effective Approaches to…...

建议收藏,轻松搞懂区块链

未来已来&#xff0c;只是不均衡地分布在当下 大家好&#xff0c;我是菜农&#xff0c;欢迎来到我的频道。 本文共 5844字&#xff0c;预计阅读 30 分钟 区块链是近些年来最热门的前沿技术&#xff0c;被认为是未来十几年对金融、物联网、医疗等诸多领域产生最大影响的"…...

php设计一个新春祝福墙

记得十几年前的时候&#xff0c;每到春节&#xff0c;各大网站都会建一个祝福墙&#xff0c;上面挂满网友的新年寄语。这些年随着移动互联网的高速发展&#xff0c;web的新春祝福墙越来越少了。今天&#xff0c;咱们就来考考古&#xff0c;用快速原型法进行设计。原型设计采用M…...

[2025CVPR]DeepVideo-R1:基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈,在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 ​安全措施依赖问题​ GRPO使用min和clip函数限制策略更新幅度,导致: 梯度抑制:当新旧策略差异过大时梯度消失收敛困难:策略无法充分优化# 传统GRPO的梯…...

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作&#xff0c;无需更改相机配置。但是&#xff0c;一…...

《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一)

CSI-2 协议详细解析 (一&#xff09; 1. CSI-2层定义&#xff08;CSI-2 Layer Definitions&#xff09; 分层结构 &#xff1a;CSI-2协议分为6层&#xff1a; 物理层&#xff08;PHY Layer&#xff09; &#xff1a; 定义电气特性、时钟机制和传输介质&#xff08;导线&#…...

基于Uniapp开发HarmonyOS 5.0旅游应用技术实践

一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架&#xff0c;支持"一次开发&#xff0c;多端部署"&#xff0c;可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务&#xff0c;为旅游应用带来&#xf…...

抖音增长新引擎:品融电商,一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

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

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

智能AI电话机器人系统的识别能力现状与发展水平

一、引言 随着人工智能技术的飞速发展&#xff0c;AI电话机器人系统已经从简单的自动应答工具演变为具备复杂交互能力的智能助手。这类系统结合了语音识别、自然语言处理、情感计算和机器学习等多项前沿技术&#xff0c;在客户服务、营销推广、信息查询等领域发挥着越来越重要…...

代码规范和架构【立芯理论一】(2025.06.08)

1、代码规范的目标 代码简洁精炼、美观&#xff0c;可持续性好高效率高复用&#xff0c;可移植性好高内聚&#xff0c;低耦合没有冗余规范性&#xff0c;代码有规可循&#xff0c;可以看出自己当时的思考过程特殊排版&#xff0c;特殊语法&#xff0c;特殊指令&#xff0c;必须…...

LangFlow技术架构分析

&#x1f527; LangFlow 的可视化技术栈 前端节点编辑器 底层框架&#xff1a;基于 &#xff08;一个现代化的 React 节点绘图库&#xff09; 功能&#xff1a; 拖拽式构建 LangGraph 状态机 实时连线定义节点依赖关系 可视化调试循环和分支逻辑 与 LangGraph 的深…...

【Elasticsearch】Elasticsearch 在大数据生态圈的地位 实践经验

Elasticsearch 在大数据生态圈的地位 & 实践经验 1.Elasticsearch 的优势1.1 Elasticsearch 解决的核心问题1.1.1 传统方案的短板1.1.2 Elasticsearch 的解决方案 1.2 与大数据组件的对比优势1.3 关键优势技术支撑1.4 Elasticsearch 的竞品1.4.1 全文搜索领域1.4.2 日志分析…...