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,一经查实,立即删除!

相关文章

重磅!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]…

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

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

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

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

PostgreSQL导出表结构带注释

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

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:- …

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

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

springboot宠物领养系统-计算机毕设 附源码 44261

springboot宠物领养系统 摘 要 网络发布信息有其突出的优点&#xff0c;即信息量大&#xff0c;资源丰富&#xff0c;更新速度快等&#xff0c;很符合人们希望以捷、便利的方式获得最多最有效信息的要求。本系统就是一个网上宠物领养系统&#xff0c;为宠物爱好者提供一个信息…

pyqt5 窗口调用网页高德地图kpi,进行实时地图导航

作为主项目功能的一部分&#xff0c;这部分我想单独记录下来 一&#xff0c;注册高德kpi【进行实名认证】 高德开放平台 | 高德地图API (amap.com) 二&#xff0c;申请Key 三&#xff0c;进入路径规划-API文档-开发指南-Web服务 API|高德地图API (amap.com) 找到你需要的路径…

【必读】从零开始,一步步教你安装nginx,搭建个人博客网站!

nginx搭建个人网站 Nginx是一款轻量级Web服务器、反向代理服务器以及电子邮件代理服务器&#xff0c;并且具有高并发连接处理能力和低内存消耗的特点。它也可以用于负载均衡和缓存控制等功能。 功能&#xff1a; 静态网站服务器&#xff1a;Nginx可以用来作为静态网站服务器&am…

员工微信私下收红包,企业如何加强监管

随着智能手机的普及和社交软件的兴起&#xff0c;越来越多的企业和员工开始使用微信等社交应用程序进行日常工作交流和业务协作。然而&#xff0c;与此同时&#xff0c;一些行业的员工在微信上私下收取红包的问题也日益严重&#xff0c;这不仅违反了公司的规定&#xff0c;也损…

Kubernetes+Gitlab+Jenkins+ArgoCD多集群部署

KubernetesGitlabJenkinsArgoCD多集群部署 文章目录 KubernetesGitlabJenkinsArgoCD多集群部署1. KubernetesGitlabJenkinsArgoCD多集群部署2. 添加WebHooks自动触发3. Jenkins-构建-执行Shell4. 制作镜像及修改Yaml文件4.1 Dockerfile4.2 Build-Shell 5.自动部署Demo测试5.1 推…

JSP EL表达式基本使用

今天我们来说EL表达式 这在整个jsp中都是非常重要的一章 因为 如果我们用 <%属性%> 属性为空时 直接就是个 null 这个肯定是不能让用户看到的东西 所以 我们就需要EL表达式 例如 我们jsp代码编写如下 <% page contentType"text/html; charsetUTF-8" page…

React函数组件渲染两次

渲染两次是因为react默认开启了严格模式 React.StrictMode标签作用&#xff1a; 1、识别不安全的生命周期 2、关于使用过时字符串 ref API 的警告 3、关于使用废弃的 findDOMNode 方法的警告 4、检测意外的副作用 5、检测过时的 context API 注释掉React.StrictMode即为关闭严…

【Windows 常用工具系列 12 -- win11怎么设置不睡眠熄屏 |win11设置永不睡眠的方法】

文章目录 win11 怎么设置不睡眠熄屏 使用笔记本电脑的时候&#xff0c;如果离开电脑时间稍微长一点就会发现息屏了&#xff0c;下面介绍 设置 Win11 永不睡眠息屏的方法&#xff0c;有需要的朋友们快来看看以下详细的教程。 win11 怎么设置不睡眠熄屏 在电脑桌面上&#xff0c…

微信怎么设置自动回复?

自动回复的用处 微信自动回复可以提高沟通效率。当你无法立即回复消息时&#xff0c;设置自动回复可以让对方知道你的情况&#xff0c;并且不会因为长时间没有回复而产生误解或不满。 微信自动回复可以节省时间和精力。如果你经常收到类似的询问或回复&#xff0c;通过设置自动…