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

CSS中常用的伪类选择器

一 、伪类(不存在的类,特殊的类)

-伪类用来描述一个元素的特殊状态

比如:第一个元素,被点击的元素,鼠标移入的元素···

-特点:一般请情况下,使用:开头

1、 :first-child 第一个子元素

2、 :last-child 最后一个子元素

        3、 :nth-child() 选中第n个子元素

                特殊值: n 所有的

                2n或even 选中偶数

                2n+1或odd 选中奇数

—以上这些伪类都是根据所有的子元素进行排序

1、:first-of-type

2、:last-of-type

3、:nth-of-type()

功能跟上面相似,

—不同的是,这是在同类型的子元素中去选择

二、:not() 否定伪类

-将符合条件的元素从选择器中去除

以下为代码演示
 

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>/*去掉项目符号*/ul {list-style: none;}/* 需求一:将ul里的第一个li自动一直设置为红色 *//* ul>li:first-child{color:red} *//* ul>li:last-child{color:blue} *//* ul>li:not(:nth-child(3)){color: green;} *//* ul>li:not(:nth-of-type(3)){color: green;} *//* li:nth-child(1) {color: pink;} *//* li:nth-of-type(1){background-color: red;} */li:not(:first-of-type){font-size: 50px;}</style></head><body><h1>沁园春·雪</h1><h3>毛泽东</h3><ul><span>测试</span><p>北国风光,千里冰封,万里雪飘。</p><li>望长城内外,惟余莽莽;大河上下,顿失滔滔。</li><li>山舞银蛇,原驰蜡象,欲与天公试比高。</li><li>须晴日,看红装素裹,分外妖娆。</li><li>江山如此多娇,引无数英雄竞折腰。</li><li>惜秦皇汉武,略输文采;唐宗宋祖,稍逊风骚。</li><li>一代天骄,成吉思汗,只识弯弓射大雕。</li></ul></body>
</html>

相关文章:

CSS中常用的伪类选择器

一 、伪类&#xff08;不存在的类&#xff0c;特殊的类&#xff09; -伪类用来描述一个元素的特殊状态 比如&#xff1a;第一个元素&#xff0c;被点击的元素&#xff0c;鼠标移入的元素 -特点&#xff1a;一般请情况下&#xff0c;使用&#xff1a;开头 1、 :first-child …...

【python学习】中级篇-数据库操作:SQLite

SQLite是一个轻量级的数据库引擎&#xff0c;它可以嵌入到各种应用程序中。以下是SQLite的基本用法&#xff1a; 创建数据库文件 import sqlite3# 连接到一个不存在的数据库文件&#xff0c;如果文件不存在&#xff0c;将会自动创建一个新的数据库文件 conn sqlite3.connect…...

汇编-PROTO声明过程

64位汇编 64 模式中&#xff0c;PROTO 伪指令指定程序的外部过程&#xff0c;示例如下&#xff1a; ExitProcess PROTO ;指定外部过程&#xff0c;不需要参数.code main PROCmov ebx, 0FFFFFFFFh mov ecx,0 ;结束程序call ExitProcess ;调用外部过程main ENDP END 32位…...

MYSQL事务操作

...

自动化测试——自动卸载软件

&#x1f4e2;专注于分享软件测试干货内容&#xff0c;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01;&#x1f4e2;交流讨论&#xff1a;欢迎加入我们一起学习&#xff01;&#x1f4e2;资源分享&#xff1a;耗时200小时精选的「软件测试」资…...

Linux - 系统调用(syscall)

说明 基于riscv64 soc linux_5.10.4平台&#xff0c;通过新增一个系统调用深入了解下系统调用实现原理。 简介 Linux 软件运行环境分为用户空间和内核空间&#xff0c;默认情况下&#xff0c;用户进程无法访问内核&#xff0c;既不能访问内核所在的内存空间&#xff0c;也不…...

c语言-冒泡排序

冒泡排序原理&#xff1a; 冒泡排序是一种简单直观的排序算法&#xff0c;它重复地遍历待排序的元素序列&#xff0c;比较相邻的两个元素&#xff0c;如果它们的顺序不符合要求&#xff08;例如升序要求前面的元素小于后面的元素&#xff09;&#xff0c;则交换它们的位置。遍历…...

Mysql面经

Select语句的执行顺序 1、from 子句组装来自不同数据源的数据&#xff1b; 2、where 子句基于指定的条件对记录行进行筛选&#xff1b; 3、group by 子句将数据划分为多个分组&#xff1b; 4、使用聚集函数进行计算&#xff1b;AVG() SUM() MAX() MIN() COUNT() 5、使用 havin…...

1panel可视化Docker面板安装与使用

官网地址1Panel - 现代化、开源的 Linux 服务器运维管理面板 文章目录 目录 文章目录 前言 一、环境准备 二、使用步骤 1.安装命令 2.一些命令 3.使用 总结 前言 一、环境准备 虚拟机centos 已经安装好docker和 Docker Compose 或者都没安装 1panel会帮你自动安装 二、使用…...

es6中的import导入模块 和 export导出模块

es6中的import导入模块 和 export导出模块 一、定义二、使用1.默认导出导入2..命名导出导入3.命名导出&#xff08;Named Export&#xff09;与默认导出&#xff08;Default Export&#xff09;结合使用 三、总结 一、定义 功能&#xff1a;用于导入和导出模块的内容。 静态加载…...

WordPress插件开发教程手册 — 钩子(Hooks)

钩子是用一段代码添加/修改另外一段代码的方式&#xff0c;是 WordPress插件和主题与 WordPress 内核交互的基础&#xff0c;钩子在 WordPress 内核中也被广泛使用。WordPress 中有两种钩子&#xff0c;Action 和 Filter。使用钩子时&#xff0c;我们需要先编写一个自定义函数作…...

Python开发运维:Celery连接Redis

目录 一、理论 1.Celery 二、实验 1.Windows11安装Redis 2.Python3.8环境中配置Celery 3.celery的多目录结构异步执行 4.celery简单结构下的定时任务 三、问题 1.Celery命令报错 2.执行Celery命令报错 3.Win11启动Celery报ValueErro错误 4.Pycharm 无法 import 同目…...

JSP:JDBC

JDBC&#xff08;Java Data Base Connectivity的缩写&#xff09;是Java程序操作数据库的API&#xff0c;也是Java程序与数据库相交互的一门技术。 JDBC是Java操作数据库的规范&#xff0c;由一组用Java语言编写的类和接口组成&#xff0c;它对数据库的操作提供基本方法&#…...

能否在一台电脑上安全地登录多个Facebook账号?

Facebook是一个流量大、用户多的平台&#xff0c;许多人可能需要在一台设备上管理多个Facebook账号&#xff0c;无论是出于个人或职业需求&#xff0c;都能带来极大地便利。然而&#xff0c;保持每个账号的安全性和隐私性却是一个挑战。本文将介绍如何在一台电脑上安全地登录多…...

Banana Pi [BPi-R3-Mini] 回顾和主线 ImmortalWrt 固件支持

BananaPi BPi-R3 Mini 采用 MediaTek 830&#xff08;4 个 A53&#xff0c;最高 2.0 GHz&#xff09;&#xff0c;具有 2 个 2.5 GbE、AX4200 2.4G/5G 无线和 USB 2.0 端口。它还具有两个 M.2 连接器&#xff0c;可用于 NVMe SSD 和 5G 模块&#xff08;板上包含 Nano SIM 插槽…...

2001-2022年上市公-供应链话语权测算数据(原始数据+处理代码Stata do文档+结果)

2001-2022年上市公-供应链话语权测算数据&#xff08;原始数据处理代码Stata do文档结果&#xff09; 1、时间&#xff1a;2001-2022年 2、指标&#xff1a;企业代码、股票代码、年份、股票简称、上市公司前五大供应商的采购额之和占企业当年总采购额的比例、上市公司前五大客…...

如何通过ShardingJDBC进行读写分离

背景信息&#xff1a; 面对日益增加的系统访问量&#xff0c;数据库的吞吐量面临着巨大瓶颈。 对于同一时刻有大量并发读操作和较少写操作类型的应用系统来说&#xff0c;将数据库拆分为主库和从库。其中主库负责处理事务性的增删改操作&#xff0c;从库负责处理查询操作&#…...

【uniapp】部分图标点击事件无反应

比如&#xff1a;点击这个图标在h5都正常&#xff0c;在小程序上无反应 css&#xff1a;也设置z-index&#xff0c;padding 页面上也试过click.native.stop.prevent"changePassword()" 时而可以时而不行&#xff0c; 最后发现是手机里输入键盘的原因&#xff0c;输…...

前端vue导出PPT,使用pptxgen.js

前言 公司新需求需要导出ppt给业务用&#xff0c;查阅资料后发现也挺简单的&#xff0c;记录一下。 如有不懂的可以留言&#xff01;&#xff01;&#xff01; 1.安装包 npm install pptxgenjs --save2.引入包 在需要使用的文件中引入 import Pptxgenfrom "pptxgenjs&…...

JSP过滤器和监听器

什么是过滤器 Servlet过滤器与Servlet十分相似&#xff0c;但它具有拦截客户端&#xff08;浏览器&#xff09;请求的功能&#xff0c;Servlet过滤器可以改变请求中的内容&#xff0c;来满足实际开发中的需要。 对于程序开发人员而言&#xff0c;过滤器实质就是在Web应用服务…...

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

unix/linux,sudo,其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...

学习STC51单片机32(芯片为STC89C52RCRC)OLED显示屏2

每日一言 今天的每一份坚持&#xff0c;都是在为未来积攒底气。 案例&#xff1a;OLED显示一个A 这边观察到一个点&#xff0c;怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 &#xff1a; 如果代码里信号切换太快&#xff08;比如 SDA 刚变&#xff0c;SCL 立刻变&#…...

学习一下用鸿蒙​​DevEco Studio HarmonyOS5实现百度地图

在鸿蒙&#xff08;HarmonyOS5&#xff09;中集成百度地图&#xff0c;可以通过以下步骤和技术方案实现。结合鸿蒙的分布式能力和百度地图的API&#xff0c;可以构建跨设备的定位、导航和地图展示功能。 ​​1. 鸿蒙环境准备​​ ​​开发工具​​&#xff1a;下载安装 ​​De…...

如何在Windows本机安装Python并确保与Python.NET兼容

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…...

GitHub 常见高频问题与解决方案(实用手册)

1.Push 提示权限错误&#xff08;Permission denied&#xff09; 问题&#xff1a; Bash Permission denied (publickey) fatal: Could not read from remote repository. 原因&#xff1a; 没有配置 SSH key 或使用了 HTTPS 而没有权限…...

基于python大数据的水文数据分析可视化系统

博主介绍&#xff1a;高级开发&#xff0c;从事互联网行业六年&#xff0c;熟悉各种主流语言&#xff0c;精通java、python、php、爬虫、web开发&#xff0c;已经做了多年的设计程序开发&#xff0c;开发过上千套设计程序&#xff0c;没有什么华丽的语言&#xff0c;只有实实在…...

交易系统开发:跨境资本的高速通道架构解密

连接纽约、香港与内陆的金融管道工程 总收益互换&#xff08;TRS&#xff09;在港美股投资中扮演着跨境资本流动的“隐形桥梁”。本文基于真实跨境券商系统开发实践&#xff0c;深入解析支持多市场、多币种、多通道的TRS平台架构设计与业务解决方案。 一、港美股TRS的核心价值&…...

ES海量数据更新及导入导出备份

一、根据查询条件更新字段 from elasticsearch import Elasticsearch import redis import json# 替换下面的用户名、密码和Elasticsearch服务器地址 username elastic password password es_host https://127.0.0.2:30674# 使用Elasticsearch实例化时传递用户名和密码 es…...

Vue项目PDF目录功能集成【一】——方案深度思考

文章目录 项目背景一、方案一&#xff1a;数据透传 外部开发模式二、方案二&#xff1a;内置组件 黑盒模式三、方案三&#xff1a;激活官方实现 可控定制总结 项目背景 本项目是Vue 3 项目&#xff0c;需要使用文件预览组件&#xff08;pdfjs 当前是作为sdk二次封装引入&am…...