CSS伪类选择器详细讲解

前言
伪类选择器在CSS中起到的作用可以说是至关重要的,如果CSS没有伪类选择器,有很多效果都要借助js来完成,这样不仅代码量增加,维护起来你难度也大。这样程序员的工作量大,也违背了CSS诞生的作用,就是提高开发效率,在同等的世间里完成更高质量的开发。

一篇文章让大家对CSS伪类有个全新的认识,相信有不少人应该有过一定的底子,虽然我写这篇文章是为了小白对CSS3伪类有个客观且全新的了解,不过对于入门的同学也用一定的作用,这篇文章有很多实用的用法可能在以前的学习中很少遇到以及见都没见过,对于这类同学们可以快速浏览看完,对于以前没遇到过得可以上手练练。对于大神级别的大佬,如果我这篇文章写得不好或者哪没写好写错的请给予建议。

虽然我这篇文章是零基础小白教程,可同学们也应该认真对待。看完要勤加练习,不然都会忘光的,所谓“温故而知新”,对于编程而言也同样适用。这里推荐个可以随时随地学编程的官网,旗下还有APP可以随时随地编程。

w3school链接:w3school

正文

伪类选择器包括伪类和伪类对象选择器,伪类选择器以冒号( : )作为前缀标识符。 冒号前可以添加选择符,限定伪类应用的范围,冒号后为伪类和伪类对象名,冒号前后没有空格,否则将认为类选择器,如图所示。

在这里插入图片描述

下面表格包含了大部分伪类选择器:

伪类选择器
动态伪类
:link

链接没有被访问前的样式效果
:visited 链接被访问后的样式效果
:hover 鼠标悬停在元素上面时的样式效果
:active 点击元素时的样式效果,即按下鼠标左键时发生的样式
:focus 用于元素成为焦点时的样式效果,常用与表单元素
结构伪类
:first-child 选择某个元素下的第一个子元素
:last-child 选择某个元素下的最后一个子元素
:nth-child() 选择某个元素下的一个或多个特定的子元素
:nth-last-child() 选择某个元素的一个或多个特定的子元素,从后往前数
:nth-of-type() 选择指定的元素
:nth-last-of-type() 选择指定的元素,从后往前数
:first-of-type 选择一个父级元素下的第一个同类型子元素
:last-of-type 选择一个父级元素下的第一个同类型子元素,从后往前数
:only-child 选择的元素是它父元素的唯一 一个子元素
:only-of-type 选择一个元素是上级元素下唯一相同类型的子元素
:empty 选择的元素里面没有任何内容(空标签)
否定伪类
:not() 排查或者过滤掉特定元素
状态伪类
:enabled 选择匹配指定范围内所有可用UI(用户界面)元素
:disabled 选择匹配指定范围内所有不可用UI(用户界面)元素
:checked 选择匹配指定范围内所有可用UI(用户界面)元素
目标伪类
:target 选择匹配父元素的所有元素,且匹配元素被相关URL指向
-------------有很多伪类选择器存在于IE低版本兼容性问题,在练习中不建议使用IE预览

味蕾选择器.
动态伪类
:link链接没有被访问前的样式效果
:visited链接被访问后的样式效果
:hover鼠标悬停在元素上面时的样式效果
:active点击元素时的样式效果,即按下鼠标左键时发生的样式
:focus用于元素成为焦点时的样式效果,常用与表单元素
==结构伪类 ==
:first-child选择某个元素下的第一个子元素
:last-child 选择某个元素下的最后一个子元素
:nth-child()选择某个元素下的一个或多个特定的子元素
:nth-last-child()
动态伪类选择某个元素的一个或多个特定的子元素,从后往前数
:nth-of-type()选择指定的元素
:nth-last-of-type()选择指定的元素,从后往前数
:first-of-type选择一个父级元素下的第一个同类型子元素
:last-of-type选择一个父级元素下的第一个同类型子元素,从后往前数
:only-child选择的元素是它父元素的唯一 一个子元素
:only-of-type选择一个元素是上级元素下唯一相同类型的子元素
:empty选择的元素里面没有任何内容(空标签)
否定伪类
:not()排查或者过滤掉特定元素
状态伪类
:enabled选择匹配指定范围内所有可用UI(用户界面)元素
:disabled选择匹配指定范围内所有不可用UI(用户界面)元素
:checked选择匹配指定范围内所有可用UI(用户界面)元素
目标伪类
:target选择匹配父元素的所有元素,且匹配元素被相关URL指向
-------------有很多伪类选择器存在于IE低版本兼容性问题,在练习中不建议使用IE预览

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

STM32F103C8T6第5天:独立看门狗、窗口看门狗、dma实验

1. 独立看门狗IWDG介绍(341.45) 什么是看门狗? 在由单片机构成的微型计算机系统中,由于单片机的工作常常会受到来自外界电磁场的干扰,造成程序的跑飞,而陷入死循环,程序的正常运行被打断&#…

美国云服务器:CN2/纯国际/高防线路介绍

​  谈到国外云服务器,美国云服务器必有一席之地。但是,一般来说使用美国云服务器,线路质量是一个重要的考虑因素。如果线路选择不合理,就有可能造成速度减慢或者安全隐患问题产生。本文将介绍美国云服务器的CN2/纯国际/高防三种…

PHP反序列化简单使用

注:比较简陋,仅供参考。 编写PHP代码,实现反序列化的时候魔法函数自动调用计算器 PHP反序列化 serialize(); 将对象序列化成字符串 unserialize(); 将字符串反序列化回对象 创建类 class Stu{ public $name; public $age; public $sex; publi…

有一台电脑一部手机就可以在网上赚钱,这些项目你也可以学会

很多人都希望能够在家中或者闲暇的时候,能够在网上赚钱,而网络给了我们这样的可能。只要有一台电脑和一部手机,你就可以开始你的赚钱之旅。这些项目并不难,只要你肯学,就一定能够成功。 1、美工设计 这个副业主要是推荐…

python plot绘图

使用python绘制t-sne图,并保存 一下是一个将que_im_features向量可视化的例子: def emb_save(que_im_features,i):# 向量[75, 640, 11, 11], episodeimport numpy as npimport pandas as pdfrom sklearn import manifoldimport matplotlib.pyplot as p…

jmeter中调用python代码

1、安装pyinstaller pip install -i https://pypi.tuna.tsinghua.edu.cn/simple pyinstaller 2、将py脚本打包 pyinstaller -F venv/get_image/OCR_jmeter_api.py 3、jmeter中添加OS Process Sampler并调用dist下的程序 4、执行jmeter

Jmeter 压测实战保姆级入门教程

1、Jmeter本地安装 1.1、下载安装 软件下载地址: https://mirrors.tuna.tsinghua.edu.cn/apache/jmeter/binaries/ 选择一个压缩包下载即可 然后解压缩后进入bin目录直接执行命令jmeter即可启动 1.2 修改语言 默认是英文的,修改中文,点击…

RubbleDB: CPU-Efficient Replication with NVMe-oF

RubbleDB: CPU-Efficient Replication with NVMe-oF 前言 这是ATC2023的文章,作者来自哥伦比亚大学这篇工作在LSM-tree多副本存储的场景下,利用NVMe-oF技术避免了LSM-tree副本上的重复合并,减少了CPU开销。 Introduction 为了提供高可用性…

Python 装饰器用法详解

目录 一、基本概念 二、语法形式 三、用法示例 1、用于日志记录 2、用于性能测试 3、用于事务处理 4、用于缓存结果 5、用于权限验证 总结 Python装饰器是Python中一种非常有用且强大的工具,它允许我们在不修改原有函数或类的基础上,对它们进行…

物联网AI MicroPython学习之语法 WDT看门狗外设

学物联网,来万物简单IoT物联网!! WDT 介绍 模块功能: 看门狗WDT(WatchDog Timer)外设驱动模块 接口说明 WDT - 构建WDT对象 函数原型:WDT(timeout)参数说明: 参数类型必选参数&#xff1f…

ultralytics yolov8 实例分割 训练自有数据集

参考: https://docs.ultralytics.com/datasets/segment/coco/ http://www.bryh.cn/a/613333.html 1、数据下载与转换yolo格式 1)数据集下载: 参考:https://universe.roboflow.com/naumov-igor-segmentation/car-segmetarion 下载的是coco格式,需要转换 2)coco2yolo t…

银行业务测试

1、商业银行四大类: 业务类系统、渠道类面试、MIS类系统、其他基础平台系统 2、银行系统开发流程(UAT是行方) 3、银行系统测试流程 4、对于不同的服务方式也不同,如:柜台、手机银行、网上银行,电话外呼,…

局域网共享打印机共享,简单至简至一键处理011bDll等问题

一、电脑系统是否激活(可选) 二、确保主客户端PC在同一局域网内(可选) 可以通过ping 目标地址 如ping 192.168.1.202;看是否可以正常通信 下面是惠普类型打印机共享问题关键(文本记得保存) …

MS2401隔离Σ-Δ调制器,可替代ADI的AD7401

产品简述 MS2401 是一款二阶 Σ-Δ 调制器,集成片上数字隔离器,能 将模拟输入信号转换为高速 1 位码流。调制器对输入信号连续 采样,无需外部采样保持电路。模拟信号输入满量程为 320 mV ,转换后的数字码流的最高数据速率为 2…

Unsupervised Condition GAN

Unsupervised Condition GAN主要有两种做法: Direct Transformation 直接输入domain X图片,经过Generator后生成对应的domain Y的图像。这种转化input和output不能够差太多。通常只能实现较小的转化,比如改变颜色等。 Projection to Commo…

低代码PaaS开发平台

目录 一、低代码概念 低代码目的 低代码核心功能 二、PaaS平台 PaaS服务的低代码平台 1.私有化部署,为数据安全保驾护航 2.业内领先技术,为开发强势赋能 3.超强集成能力,系统对接无忧 4.源代码交付,实现二开自由 三、小结 一、低代…

shell脚本三

目录 一、循环语句 一、循环 二、for循环语句 1.列表循环 2.与c语言循环相似的for循环 3.使用for打印三角形以及乘法表 4.测试172.16.114.0网段存活的主机并将存活的主机IP地址写入文件中,未存活的主机放入另一文件中 三、while循环语句 四、until循环语句…

银行数字化转型导师坚鹏:BLM银行数字化转型战略培训圆满结束

在数字化转型背景下,中国金融出版社金融文化研训院为了落实监管政策《关于银行业保险业数字化转型的指导意见》,充分认识到学习银行银行数字化转型战略的价值和重要性,特别举办《2023年金融机构数字化转型及数字化风控与运营管理研讨班》。为…

python 实现等声值线图绘制

今天讲一类环评项目的噪声预测 - 风电 风机噪声作为面源目前难有成熟的模型进行预测。根据国内外的研究,都是根据与风机中心的位置进行分级预测。 翟国庆等利用美国航天航空局(NASA)研发的风电机组噪声预测模型(以下简称 NASA”…

短时傅里叶变换函数编写

文章目录 傅里叶变换与短时傅里叶变换什么是窗?自己对手实现短时傅里叶变换 傅里叶变换与短时傅里叶变换 在了解短时傅里叶变换之前,首先要知道是什么是傅里叶变换( fourier transformation,FT),傅里叶变换…