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

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

【Oracle APEX开发小技巧12】

有如下需求&#xff1a; 有一个问题反馈页面&#xff0c;要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据&#xff0c;方便管理员及时处理反馈。 我的方法&#xff1a;直接将逻辑写在SQL中&#xff0c;这样可以直接在页面展示 完整代码&#xff1a; SELECTSF.FE…...

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日 来简单学一下子来 一、选择题&#xff08;可多选&#xff09; 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘&#xff1a;专注于发现数据中…...

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 &#xff08;1&#xff09;设置网关 打开VMware虚拟机&#xff0c;点击编辑…...

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

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

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

【Go语言基础【13】】函数、闭包、方法

文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数&#xff08;函数作为参数、返回值&#xff09; 三、匿名函数与闭包1. 匿名函数&#xff08;Lambda函…...

Chrome 浏览器前端与客户端双向通信实战

Chrome 前端&#xff08;即页面 JS / Web UI&#xff09;与客户端&#xff08;C 后端&#xff09;的交互机制&#xff0c;是 Chromium 架构中非常核心的一环。下面我将按常见场景&#xff0c;从通道、流程、技术栈几个角度做一套完整的分析&#xff0c;特别适合你这种在分析和改…...

Leetcode33( 搜索旋转排序数组)

题目表述 整数数组 nums 按升序排列&#xff0c;数组中的值 互不相同 。 在传递给函数之前&#xff0c;nums 在预先未知的某个下标 k&#xff08;0 < k < nums.length&#xff09;上进行了 旋转&#xff0c;使数组变为 [nums[k], nums[k1], …, nums[n-1], nums[0], nu…...

Modbus RTU与Modbus TCP详解指南

目录 1. Modbus协议基础 1.1 什么是Modbus? 1.2 Modbus协议历史 1.3 Modbus协议族 1.4 Modbus通信模型 🎭 主从架构 🔄 请求响应模式 2. Modbus RTU详解 2.1 RTU是什么? 2.2 RTU物理层 🔌 连接方式 ⚡ 通信参数 2.3 RTU数据帧格式 📦 帧结构详解 🔍…...