css 伪类有哪些

css伪类有:“:link”、“:visited”、“:hover”、“:active”、“:focus”、“:lang()”、“not()”、“:root”、“:first-child”、“:last-child”、“:empty”等等。

css 伪类有哪些

本教程操作环境:windows7系统、CSS3版、Dell G3电脑。

CSS伪类是用来添加一些选择器的特殊效果,是用于已有元素处于某种状态时为其添加对应的样式,这个状态是根据用户行为而动态变化的。

例如:当用户悬停在指定元素时,可以通过:hover来描述这个元素的状态,虽然它和一般css相似,可以为已有元素添加样式,但是它只有处于DOM树无法描述的状态下才能为元素添加样式,所以称为伪类。

在感觉上伪类可以是动态的,当用户和文档进行交互的时候一个元素可以获取或者失去一个伪类。例外的是”:first-child”能通过文档树推断出来,”:lang”在一些情况下也在从文档树中推断出来。

立即学习“前端免费学习笔记(深入)”;

由此可以看出,它的功能和class有些类似,但它是基于文档之外的抽象,所以叫伪类。

css 伪类选择器列表

Properties
属性 CSS Version
版本 Inherit From Parent
继承性 Description
简介

E:linkCSS1无CSS1 伪类选择符 E:link ,设置超链接a在未被访问前的样式。E:visitedCSS1无CSS1 伪类选择符 E:visited,设置超链接a在其链接地址已被访问过时的样式。E:hoverCSS2无CSS2/CSS1 伪类选择符 E:hover,设置元素在其鼠标悬停时的样式。E:activeCSS2/CSS1无CSS2/CSS1 伪类选择符 E:active,设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。E:focusCSS2/CSS1无CSS2/CSS1 伪类选择符 E:focus,设置元素在成为输入焦点(该元素的onfocus事件发生)时的样式。E:lang()CSS2无CSS2 伪类选择符 E:lang() 匹配使用特殊语言的E元素。E:not()CSS3无CSS3 伪类选择符 E:not() 匹配不含有s选择符的元素E。E:rootCSS3无CSS3 伪类选择符 E:root,匹配E元素在文档的根元素。E:first-childCSS2无CSS2 伪类选择符 E:first-child 匹配父元素的第一个子元素E。E:last-childCSS3无CSS3 伪类选择符 E:last-child 匹配父元素的最后一个子元素E。E:only-childCSS3无CSS3 为例选择符 E:only-child 匹配父元素仅有的一个子元素E。E:nth-child(n)CSS3无CSS3 伪类选择符 E:nth-child(n) 匹配父元素的第n个子元素E。E:nth-last-child(n)CSS3无CSS3 伪类选择符 E:nth-last-child(n) 匹配父元素的倒数第n个子元素E。E:first-of-typeCSS2无CSS3 伪类选择符 E:first-of-type 匹配同类型中的第一个同级兄弟元素E。E:last-of-typeCSS3无CSS3 伪类选择符 E:last-of-type 匹配同类型中的最后一个同级兄弟元素E。E:only-of-typeCSS3无CSS3 伪类选择符 E:only-of-type,匹配同类型中的唯一的一个同级兄弟元素E。E:nth-of-type(n)CSS3无CSS3 伪类选择符 E:nth-of-type(n),匹配同类型中的第n个同级兄弟元素E。E:nth-last-of-type(n)CSS3无CSS3 伪类选择符 E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素E。E:emptyCSS3无CSS3 伪类选择符 E:empty 匹配没有任何子元素(包括text节点)的元素E。E:checkedCSS3无CSS3 伪类选择符 E:checked 匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox 的form元素)E:enabledCSS3无CSS3 伪类选择符 E:enabled 匹配用户界面上处于可用状态的元素E。E:disabledCSS3无CSS3 伪类选择符 E:disabled 匹配用户界面上处于禁用状态的元素E。E:targetCSS3无CSS3 伪类选择符 E:target 匹配相关URL指向的E元素。@page:firstCSS2无CSS2 伪类选择符 @page:first 设置页面容器第一页使用的样式。仅用于@page规则@page:leftCSS2无CSS2 伪类选择符 @page:left 置页面容器位于装订线左边的所有页面使用的样式。仅用于@page规则@page:rightCSS2无CSS2 为对象选择符 @page:right 设置页面容器位于装订线右边的所有页面使用的样式。仅用于@page规则

(学习视频分享:css视频教程)

以上就是css 伪类有哪些的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1620725.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月24日 07:14:04
下一篇 2025年12月10日 23:55:02

相关推荐

  • 浅谈CSS如何实现九宫格提示超出数量

    本篇文章给大家介绍一下使用纯css实现九宫格提示超出数量。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所助。 经常在某些 app 中看到这样的九宫格设计。当缩略图不足 9 张时,正常排列,当超过 9 张时,会提示还剩多少张,如下: 如何使用纯 CSS 实现这一效果呢?一起来看看吧 立即学…

    2025年12月24日 好文分享
    000
  • 给元素设置圆角半径的css属性是什么

    给元素设置圆角半径的css属性是border-radius,该属性可以设置元素的外边框圆角,只需要给指定元素添加“border-radius: 圆角值;”代码样式即可实现圆角效果。 本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。 给元素设置圆角半…

    2025年12月24日 好文分享
    000
  • 5款实用CSS 3D特效,让你的页面更惊艳!

    本篇文章给大家分享5款实用CSS 3D特效,有的是网站开发中常用的、实用的功能,可以让你的页面更惊艳。下面我们来一起看看吧! 图像转换 与THREE.js 结合使用- 此图片幻灯片将让您的访问者惊呆了。你不能错过这一个,相信我! 演示地址:https://codepen.io/zadvorsky/p…

    2025年12月24日 好文分享
    000
  • css声明语句总是以什么结束

    CSS规则由两个主要的部分构成:选择器,以及一条或多条声明。选择器就是需要改变样式的HTML元素;每条声明由一个属性和一个值组成,css声明语句总是以分号“;”结束,声明组以大括号“{…}”括起来。 本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。…

    2025年12月24日
    000
  • css怎么设置4个边框颜色不同

    在css中,可以利用border-top-color、border-bottom-color、border-left-color、border-right-color属性来分别设置上边框、下边框、左边框和右边框的颜色即可。 本教程操作环境:windows7系统、CSS3&&HTML5…

    2025年12月24日
    000
  • css精灵图怎么定位

    精灵图利用background-image,background-repeat,background-position的组合进行背景定位,background-position属性可以用数字能精确的定位出背景图片在布局盒子对象位置。 本教程操作环境:windows7系统、CSS3&&…

    2025年12月24日
    000
  • css怎么设置盒子两像素黑色边框

    在css中,可以利用border属性来设置盒子两像素黑色边框,只需要给盒子元素添加“border:2px 边框样式值 black;”或者“border:2px 边框样式值 #000000;”样式即可。 本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑…

    2025年12月24日
    000
  • css怎么对文字分栏

    css中可利用columns属性或者column-width和column-count属性来对文字进行分栏,只需要给文字元素添加“columns:栏宽度 栏数;”或者“column-width:值;column-count:值;”样式即可。 本教程操作环境:windows7系统、CSS3&&…

    2025年12月24日
    000
  • css怎么设置第一个子元素的高度

    在css中,可以利用“:first-child”选择器和height属性来设置第一个子元素的高度,该选择器用于匹配其父元素中的第一个子元素E,语法格式“E:first-child{ height:高度值;}”。 本教程操作环境:windows7系统、CSS3&&HTML5版、Dell…

    2025年12月24日
    000
  • css怎么设置斜体字效果

    在css中,可以利用font-style属性来设置斜体字效果,只需要设置“font-style:italic;”或者“font-style:oblique;”样式即可;值italic可以定义斜体样式,值oblique可以定义倾斜的字体样式。 本教程操作环境:windows7系统、CSS3&&…

    2025年12月24日
    000
  • css怎么实现竖线

    实现方法:1、利用border-left或border-right属性实现;2、使用伪元素来实现;3、利用box-shadow属性实现;4、利用“filter:drop-shadow()”实现;5、利用linearGradient渐变实现。 本教程操作环境:windows7系统、CSS3&&…

    2025年12月24日 好文分享
    000
  • css中怎么设置虚线上边框

    css中可利用border-top-style属性来设置虚线上边框,只需要给元素添加“border-top-style:dashed;”样式即可。border-top-style属性可设置元素的上边框样式,值为dashed时可定义虚线样式。 本教程操作环境:windows7系统、CSS3&&…

    2025年12月24日
    000
  • 手把手教你使用CSS自定义好看的滚动条样式!

    自定义滚动条现在越来越流行,很值得研究一翻。下面本篇文章就来带大家了解一下滚动条的组成部分,介绍一下如何使用css自定义滚动条样式。 (学习视频分享:css视频教程) 为什么需要自定义滚动?浏览器的默认的滚动条让UI在多个操作系统中看起来不一致,使用定义滚动我们可以统一风格。 我一直对如何在CSS中…

    2025年12月24日 好文分享
    000
  • css中id选择器和class选择器有何不同

    之前的文章《什么是CSS语法?详细介绍使用方法及规则》中带了解CSS语法使用方法及规则。下面本篇文章来带大家了解一下CSS中的id选择器与class选择器,介绍一下它们的区别,快来一起学习吧!! id选择器和class选择器介绍 CSS中对html元素的样式进行控制是通过CSS选择器来完成的,最常用…

    2025年12月24日
    000
  • 入门级了解CSS知识体系

    给分享一下CSS体系图,很有用,大家收藏吧,下面本篇文章带来大家了解一下CSS入门知识。 CSS 体系 css 大致了解如下就可以: CSS3 Cascading Style Sheet层叠级联样式表 字体,颜色,边距,高度,宽度,背景图片,网页定位,网页浮动… 立即学习“前端免费学习笔记(深入)”…

    2025年12月24日
    000
  • 什么是高宽比?CSS中如何实现宽高比?

    图像和响应式元素的宽高间有一个一致的比例是很重要的,下面文章带大家了解一下高宽比,aspect-ratio属性,通过示例详细介绍一下css中实现宽高比的方法。 什么是高宽比 根据维基百科的说法: 在数学上,比率表示一个数字包含另一个数字的多少倍。例如,如果一碗水果中有八个橙子和六个柠檬,那么橙子和柠…

    2025年12月24日 好文分享
    000
  • 深入了解css中的will-change属性

    什么是css will-change属性?要怎么用?本篇文章就来带大家研究一下will-change属性,看看何时使用、如何使用以及如何更好的在css中设置will-change。 will-change CSS 属性 will-change 为web开发者提供了一种告知浏览器该元素会有哪些变化的方…

    2025年12月24日
    000
  • 浅谈css perspective属性和perspective()函数的异同点

    css perspective属性和perspective()函数间有什么差异?本篇文章带大家简单对比一下perspective属性和perspective()函数,了解一下它们间的异同点。 perspective 透视属性perspective 用于激活元素上的三维空间,以便其子元素可以定位在该空…

    2025年12月24日 好文分享
    000
  • css怎么去掉左边边框

    在css中,可以利用border-left-style属性来去掉左边边框,该属性可以设置元素左边框样式;只需要给指定的边框元素设置“border-left-style:none;”样式即可去掉左边边框。 本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电…

    2025年12月24日
    000
  • css怎么设置权重

    在css中,可以使用“!important”语句来设置权重,该语句为开发者提供了一个增加样式权重的方法;语法格式“属性:属性值 !important;”。“!important”语句是对整条样式的声明,包括这个样式的属性和属性值。 本教程操作环境:windows7系统、CSS3&&H…

    2025年12月24日 好文分享
    000

发表回复

登录后才能评论
关注微信