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预览

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

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

相关文章

洛谷 P1250 种树

种树 题目背景 一条街的一边有几座房子,因为环保原因居民想要在路边种些树。 题目描述 路边的地区被分割成块,并被编号成 1 , 2 , … , n 1, 2, \ldots,n 1,2,…,n。每个部分为一个单位尺寸大小并最多可种一棵树。 每个居民都想在门前种些树&#…

重磅!TikTok Shop将以新方式重启印尼业务

据报道,TikTok将通过与印尼电商平台合作的方式重启电商业务。 据悉,印尼合作社和中小企业部就TikTok Shop将在印尼重新开业的消息发表了讲话。合作社和中小企业部Temmy Satya Permana证实TikTok Shop将在印尼重新开业的消息。他表示,TikTok …

使用 Python脚本在3DMAX中加载图像和读取图像中的像素值

如何使用Python在3dmax中加载和显示图像文件?我们先看下面的代码: *测试的3dmax文件和图像文件位于同一目录中。 from MaxPlus import BitmapManagerimage_file_path rje_gray_02_4k.exrbmp_storage MaxPlus.Factory.CreateStorage(17)bmp_info bmp…

探索数字孪生的潜力:五个最有前景的行业

数字孪生技术正在引领一场新的工业革命,其潜力正在被全球范围内的行业所认识和利用。在未来,数字孪生技术将在许多行业中发挥重要作用,本文带大家共同解析未来数字孪生技术五个最有发展前景的行业。 1.制造业 数字孪生技术可以帮助制造商模…

Leetcode——169 多数元素

我的答案 class Solution {public int majorityElement(int[] nums) {int len nums.length;Arrays.sort(nums);int count 1;int res 0;if(len 1){return nums[0];}for(int i0; i<len-1; i){if(nums[i]nums[i1]){count;}else{count 1;}if(count>len/2){res nums[i]…

springboot post添加URL添加参数

出现 MissingServletRequestParameterException: Required String parameter pageNumber is not present 异常的原因是在请求中没有提供名为 pageNumber 的参数。 请确保发送 POST 请求时&#xff0c;在请求的 URL 或请求体中提供了名为 pageNumber 的参数&#xff0c;以满足方…

【问题定位】通过看Mybatis源码解决系统问题

开发需求好好的&#xff0c;运维同事突然发现了一个问题&#xff0c;某个任务的详情页面加载不出来。看日志&#xff0c;系统在进行查询操作的时候抛出空指针异常。感觉是Mybatis内部异常&#xff0c;所以就跟踪源码看下Mybatis运行到哪一步报错的。 DefaultSqlSession#select…

MySQL大表设计

存储大规模数据集需要仔细设计数据库模式和索引&#xff0c;以便能够高效地支持各种查询操作。在面对数亿条数据&#xff0c;每条数据包含数百个字段的情况下&#xff0c;以下是我能想到的在设计数据库的时候需要注意的内容&#xff0c;不足之处欢迎各位在评论区批评指正&#…

2023年亚太杯数学建模思路 - 案例:粒子群算法

文章目录 1 什么是粒子群算法&#xff1f;2 举个例子3 还是一个例子算法流程算法实现建模资料 # 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 什么是粒子群算法&#xff1f; 粒子群算法&#xff08;Pa…

零成本搭建微信公众号自助查券返利机器人教程

零成本搭建微信公众号自助查券返利机器人教程 随着电商行业的快速发展&#xff0c;越来越多的消费者开始关注如何通过优惠券和返利来省钱购物。而微信公众号自助查券返利机器人的出现&#xff0c;为消费者提供了更加便捷的渠道来查找和获取优惠信息。本文将结合微赚淘客系统&a…

PostgreSQL导出表结构带注释

我们在平时开发过程中&#xff0c;经常会在字段的注释中&#xff0c;加上中文&#xff0c;解释字段的相关含义&#xff0c;也可以避免时间太久忘记这个字段代表什么&#xff0c;毕竟英文水平不好。我们可能要经常整理数据库表结构&#xff0c;提供他人去收集数据&#xff0c;但…

Doris中的Rollup(十五)

ROLLUP 在多维分析中是“上卷”的意思&#xff0c;即将数据按某种指定的粒度进行进一步聚合。 在 Doris 中&#xff0c;我们将用户通过建表语句创建出来的表称为 Base 表&#xff08;Base Table&#xff09;。Base 表中保存着按用户建表语句指定的方式存储的基础数据。 在 Ba…

iOS 17 跳转到系统设置页面(蓝牙、wifi、键盘、壁纸、铃声、iCloud等等)

最新iOS系统设置和路径对照表 名称路径aboutApp-prefs:General&pathAboutautoLockApp-prefs:General&pathAUTOLOCKbluetoothApp-prefs:BluetoothdateTimeApp-prefs:General&pathDATE_AND_TIMEfacetimeApp-prefs:FACETIMEgeneralApp-prefs:GeneralkeyboardApp-pref…

SQLite3 数据库学习(四):Qt 数据库基础操作

参考引用 SQLite 权威指南&#xff08;第二版&#xff09;SQLite3 入门 1. 创建连接执行 sql 语句 在 Qt 中使用数据库要在工程文件中添加QT sql1.1 main.cpp #include "createsqlapp.h" #include <QApplication> #include <QSqlDatabase> #include &l…

香港高端人才通行证计划申请(包括条件)你需要知道的这些真相!

香港高端人才通行证计划申请&#xff08;包括条件&#xff09;你需要知道的这些真相&#xff01; 香港高才通计划从刚推出就带着“光速获批“的光环&#xff0c;吸引了大批高学历和高收入人士&#xff0c;后续也因它申请要求简单、明确&#xff0c;获批率高等优势&#xff0c;火…

主机dbeaver访问gitlab容器中的pg

映射5432端口- 5431:5432或者从docker客户端查看 version: 3.6 services:web:image: gitlab/gitlab-ce:latestrestart: alwayshostname: localhostenvironment:GITLAB_OMNIBUS_CONFIG: |external_url http://localhost:8929gitlab_rails[gitlab_shell_ssh_port] 2224ports:- …

【正点原子STM32连载】 第五十七章 DSP FFT实验(Julia分形)实验 摘自【正点原子】APM32F407最小系统板使用指南

1&#xff09;实验平台&#xff1a;正点原子stm32f103战舰开发板V4 2&#xff09;平台购买地址&#xff1a;https://detail.tmall.com/item.htm?id609294757420 3&#xff09;全套实验源码手册视频下载地址&#xff1a; http://www.openedv.com/thread-340252-1-1.html## 第五…

springboot_项目重启问题

问题描述 在做一个文件上传功能的时候&#xff0c;我获取到类路径&#xff1a; String classPath ClassUtils.getDefaultClassLoader().getResource("").getPath();此方法获取到的路径是&#xff1a;/target/classes我将文件存储到/target/classes/template/中 此…

递归结构体数组链表实现

#ifndef _MODEL_SCHEDULE_H_ #define _MODEL_SCHEDULE_H_#define MODEL_SCHEDULE_IDLE 0x00000000 #define MODEL_SCHEDULE_OCCUPY 0x5A555A55#define MODEL_SCHEDULE_NUM 10typedef struct model_schedule_linked_list_unit {int idleFlag; //资源是否被占用vo…

文心一言 VS 讯飞星火 VS chatgpt (140)-- 算法导论11.4 5题

五、用go语言&#xff0c;考虑一个装载因子为a的开放寻址散列表。找出一个非零的a值&#xff0c;使得一次不成功查找的探查期望数是一次成功查找的探查期望数的 2 倍。这两个探查期望数可以使用定理11.6 和定理 11.8 中给定的上界。 文心一言&#xff0c;代码正常运行&#xf…