当前位置: 首页 > 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…...

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

RocketMQ延迟消息机制

两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数&#xff0c;对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后&#xf…...

《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

将对透视变换后的图像使用Otsu进行阈值化,来分离黑色和白色像素。这句话中的Otsu是什么意思?

Otsu 是一种自动阈值化方法&#xff0c;用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理&#xff0c;能够自动确定一个阈值&#xff0c;将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

令牌桶 滑动窗口->限流 分布式信号量->限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

让AI看见世界:MCP协议与服务器的工作原理

让AI看见世界&#xff1a;MCP协议与服务器的工作原理 MCP&#xff08;Model Context Protocol&#xff09;是一种创新的通信协议&#xff0c;旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天&#xff0c;MCP正成为连接AI与现实世界的重要桥梁。…...

MySQL中【正则表达式】用法

MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现&#xff08;两者等价&#xff09;&#xff0c;用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例&#xff1a; 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...

初学 pytest 记录

安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

Spring是如何解决Bean的循环依赖:三级缓存机制

1、什么是 Bean 的循环依赖 在 Spring框架中,Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌,形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路,例如: 双向依赖:Bean A 依赖 Bean B,同时 Bean B 也依赖 Bean A(A↔B)。链条循环: Bean A → Bean…...