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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/156148.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

金融企业为啥不选择云服务器还是考虑服务器托管

尽管云主机在近年来的发展中取得了巨大的成功&#xff0c;但在金融行业中&#xff0c;一些客户仍然倾向于将服务器托管到数据中心&#xff0c;而不是使用云主机。以下是一些金融客户选择将服务器托管到数据中心的原因&#xff1a; 数据安全性&#xff1a;金融行业对数据的安全性…

Arduino驱动Si7021温湿度传感器(温湿度传感器)

目录 1、传感器特性 2、控制器和传感器连线图 3、驱动程序 Si7021温湿度传感器,应用了专用的数字模块采集技术和温湿度传感技术,具有极高的可靠性与卓越的长期稳定性。同时其体积小巧、精度高,特别是拥有毫秒级测试转换时间(DHT系列需要约2s的转换时间),启动测量与读…

抖音预约服务小程序开发:前端与后端技术的完美融合

开发抖音预约服务小程序成为了一种有趣而又实用的尝试。本篇文章&#xff0c;小编会与大家共同探讨抖音预约服务小程序开发的前端与后端技术融合的关键要点。 一、前端技术选择与设计 1.小程序框架 开发抖音预约服务小程序的前端&#xff0c;首先需要选择一个适用的小程序框…

Ubuntu设设置默认外放和麦克风设备

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、pulseaudio 是什么&#xff1f;二、配置外放1.查看所有的外放设备2.设定默认的外放设备3.设定外放设备的声音强度4.设定外放设备静音 三、配置麦克风1.查看…

C#winform门诊医生系统+sqlserver

C#winform门诊医生系统sqlserver说明文档 运行前附加数据库.mdf&#xff08;或sql生成数据库&#xff09; 主要技术&#xff1a;基于C#winform架构和sql server数据库 功能模块&#xff1a; 个人中心&#xff1a;修改个人信息、打开照片并进行修改 预约挂号&#xff1a;二级…

轻松驾驭Linux命令:账户查看、目录文件操作详解

&#x1f3a5; 屿小夏 &#xff1a; 个人主页 &#x1f525;个人专栏 &#xff1a; Linux系统操作 &#x1f304; 莫道桑榆晚&#xff0c;为霞尚满天&#xff01; 文章目录 &#x1f4d1;引言&#x1f324;️查看账户☁️whoami☁️who &#x1f324;️ls和目录文件的创建删除☁…

Vue2系列 — 修饰符.sync

.sync 修饰符以前存在于 Vue1.0 版本里&#xff0c;后来在2.0版本中移除了 .sync 修饰符。 但是在 2.0 发布之后的实际应用中&#xff0c;发现 .sync 还是有其适用之处&#xff0c;比如在开发可复用的组件库时。我们需要做的只是让子组件改变父组件状态的代码更容易被区分。 从…

【Spring Boot】如何运用Spring Cache并设置缓存失效时间

简单描述 Spring Cache是一个框架&#xff0c;实现了基于注解的缓存功能&#xff0c;只需要简单地加一个注解&#xff0c;就能实现缓存功能。Spring Cache提供了一层抽象&#xff0c;底层可以切换不同的cache实现。具体就是通过CacheManager接口来统一不同的缓存技术。CacheMan…

JavaScript的学习之BOM和DOM,就这一篇就OK了!(超详细)

目录 Day28 JavaScript(2) 1、BOM对象 1.1 window对象 1.2 Location ( 地址栏)对象 1.3 本地存储对象 2、DOM对象(JS核心) 2.1 查找标签 2.2 绑定事件 2.3 操作标签 2.4 常用事件 Day28 JavaScript(2) 1、BOM对象 BOM:Broswer object model,即浏览器提供我们开发者…

算法学习 day27

第二十七天 美化数组的最少删除数 2216. 美化数组的最少删除数 - 力扣&#xff08;LeetCode&#xff09; class Solution { public:int minDeletion(vector<int>& nums) {int len nums.size();if(len 0) return 0;int res 0,cur 0;for(int i 1;i < len;i)…

企业数字化转型所需的数据在哪里找?企业数据运营有什么用?

现阶段&#xff0c;越来越多企业考虑数字化转型。特别是中小型企业&#xff0c;他们察觉到&#xff1a;数字化转型的关键在于数据的运营。只有通过数据的有效管理和不断挖掘&#xff0c;企业才可以更好地了解市场需求&#xff0c;优化业务流程&#xff0c;提高决策效率&#xf…

【设计模式】聊聊职责链模式

原理和实现 模板模式变化的是其中一个步骤&#xff0c;而责任链模式变化的是整个流程。 将请求的发送和接收解耦合&#xff0c;让多个接收对象有机会可以处理这个请求&#xff0c;形成一个链条。不同的处理器负责自己不同的职责。 定义接口 public interface Filter {/*** …

[AutoSar]在Davinci developer中mapping Com interface port

目录 关键词平台说明一、实现步骤1.1 新建一个需要接入Com interface 的SWC1.2 Data mapping1.3 选择SWC和信号为分开的还是group1.4 添加前缀后缀1.5 在SWC中使用 关键词 嵌入式、C语言、autosar 平台说明 项目ValueOSautosar OSautosar厂商vector芯片厂商TI编程语言C&…

杭电oj 2053 Switch游戏 C语言

本题用到了异或“^”的性质&#xff1a;0与任何数异或都为该数本身&#xff0c;相同的两个数异或为0&#xff1b; #include <stdio.h>void main() {int n, i, out;while (~scanf_s("%d", &n)){out 0;for (i 1; i < n; i){if (n % i 0)out ^ 1;}pri…

Linux内核分析(十九)--内存管理之Linux中的内存管理机制汇总

目录 一、引言 二、虚拟内存 ------>2.1、linux中的分段与分页 ------>2.2、Linux的内存分配与管理 ------>2.3、vm_area_struct ------>2.4、两部分的页表分配 三、物理内存 ------>3.1、伙伴系统 ------>3.2、slab分配器 ------>3.3、内核态内…

ELK企业级日志分析平台

目录 一、elasticsearch 1、集群部署 2、cerebro部署 3、elasticsearch-head插件部署 4、elasticsearch集群角色分类 二、logstash 1、部署 2、elasticsearch输出插件 3、file输入插件 4、file输出插件 5、syslog 插件 6、多行过滤插件 7、grok过滤 三、kibana数…

微信关键词自动回复有什么用?

微信关键词自动回复有什么用&#xff1f; 关键词回复可以帮助解答客户的高频次问题。 假如&#xff0c;微信可以设置自动回复。。。 你还在担心一个个通过好友手动发欢迎语吗&#xff1f; 遇到常规问题&#xff0c;不用再复制粘贴那个已经回答了一百遍的答案吗&#xff1f;…

新加坡服务器托管-金融企业的选择

新加坡作为一个亚洲金融中心&#xff0c;其优越的地理位置和先进的信息通信技术基础设施&#xff0c;使得其成为了众多金融机构企业选择服务器机房托管的理想地点。金融行业对于服务器的安全性和可靠性要求很高&#xff0c;而将服务器托管在新加坡有许多好处。 首先&#xff0c…

多目标应用:基于多目标粒子群优化算法MOPSO求解微电网多目标优化调度(MATLAB代码)

一、微网系统运行优化模型 微电网优化模型介绍&#xff1a; 微电网多目标优化调度模型简介_IT猿手的博客-CSDN博客 二、多目标粒子群优化算法MOPSO 多目标粒子群优化算法MOPSO简介&#xff1a; 三、多目标粒子群优化算法MOPSO求解微电网多目标优化调度 &#xff08;1&…