css中一个冒号和两个冒号分别代表什么?

css中一个冒号和两个冒号分别代表什么?

一个冒号是伪类,两个冒号是伪元素。

(推荐学习:css快速入门)

伪类可以独立于文档的元素来分配样式,且可以分配给任何元素,逻辑上和功能上类类似,但是其是预定义的、不存在于文档树中且表达方式也不同,所以叫伪类。

伪元素所控制的内容和一个元素控制的内容一样,但是伪元素不存在于文档树中,不是真正的元素,所以叫伪元素。

伪类有::first-child ,:link:,vistited,:hover:,active:focus,:lang

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

伪元素有::first-line,:first-letter,:before,:after

伪类和伪元素的区别:

伪类

伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,而不是元素的id、class、属性等静态的标志。

由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又会失去这个样式。由此可以看出,它的功能和class有些类似,但它是基于文档之外的抽象,所以叫伪类。

:link

伪类将应用于未被访问过的链接,与:visited互斥。

:hover

伪类将应用于有鼠标指针悬停于其上的元素。

:active

伪类将应用于被激活的元素,如被点击的链接、被按下的按钮等。

:visited

伪类将应用于已经被访问过的链接,与:link互斥。

:focus

伪类将应用于拥有键盘输入焦点的元素。

:first-child

伪类将应用于元素在页面中第一次出现的时候。

:lang

伪类将应用于元素带有指定lang的情况。

伪元素

与伪类针对特殊状态的元素不同的是,伪元素是对元素中的特定内容进行操作,它所操作的层次比伪类更深了一层,也因此它的动态性比伪类要低得多。

实际上,设计伪元素的目的就是去选取诸如元素内容第一个字(母)、第一行,选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的,但是它本身只是基于元素的抽象,并不存在于文档中,所以叫伪元素。

::first-letter

伪元素的样式将应用于元素文本的第一个字(母)。

::first-line

伪元素的样式将应用于元素文本的第一行。

::before

在元素内容的最前面添加新内容。

::after

在元素内容的最后面添加新内容。

::before和::after通常与CSS内容生成配合使用。

以上就是css中一个冒号和两个冒号分别代表什么?的详细内容,更多请关注创想鸟其它相关文章!

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月24日 04:54:09
下一篇 2025年12月24日 04:54:34

相关推荐

  • 使用 CSS 实现一个简单的骨架屏(Skeleton Screen)

    前言 在加载网络数据时,为了提升用户体验,通常会使用一个转圈圈的loading动画,或者使用skeleton screen占位。相比与loading动画,skeleton screen的效果要更生动,实现起来来也很简单。利用css就可以实现一个简单的skeleton screen。(什么是骨架屏(s…

    2025年12月24日 好文分享
    000
  • CSS结构性伪类选择器—nth-of-type实现自定义导航菜单案例解析(代码实例)

    本文目标: 1、掌握css中结构性伪类选择器—nth-of-type的用法 问题: 1、实现以下自定义导航菜单,且使用纯DIV+CSS,必须使用结构性伪类选择器—nth-of-type 附加说明: 1、导航宽800px,高90px,居中显示 立即学习“前端免费学习笔记(深入)”; 2、雪花背景图片宽…

    2025年12月24日 好文分享
    000
  • css选择器有哪些?哪些属性是可以继承的?

    css选择器: id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器(ul > li)、后代选择器(li a)、通配符选择器(*)、属性选择器(a[rel=”external”])、伪类选择器(a:hover,…

    2025年12月24日
    000
  • 如何合理使用CSS框架?

    现在的网站风格已经与它们很早之前的样子有了很大的不同。如果现在再回过头去看有些公司最初的网站UI,我想大多数互联网用户都很难认得出来。所以也多亏了网页设计技术的创新,现在网站不仅仅是只能显示信息,它们同样也可以拥有有趣的动画、多样的布局和互动的元素。而其中,这些大部分都是由CSS来实现的。 所以CS…

    2025年12月24日
    000
  • 如何实现css代码复用

    如何实现css代码复用? (推荐学习:css快速入门) 建议如下: 1、在做CSS项目规划时,首先写好reset类代码; 因为浏览器对于标签是有默认样式的。 立即学习“前端免费学习笔记(深入)”; 2、划分CSS原子类; 一个大型的项目,会有一些常用的css规则,比如text-align,float…

    2025年12月24日
    000
  • CSS 实现拖拽改变布局大小

    利用浏览器非overflow:auto元素设置resize可以拉伸的特性实现无JavaScript的分栏宽度控制。 推荐视频教程:《CSS视频教程-玉女心经版》 webkit浏览器下滚动条可以自定义,其中resize区域大小就是scrollbar的大小,于是,我们可以将整个拉伸区域变成和容器一样高。…

    2025年12月24日 好文分享
    000
  • css实现背景图片拉伸填充

    首先我们知道用作背景图片的有两类: (推荐学习:css快速入门) 1、一整张大图,尺寸和区域大小刚好吻合; 2、一个很小的条状图,通过repeat后,形成一个很规则的大图背景。 那么如何实现背景图片拉伸填充呢? 立即学习“前端免费学习笔记(深入)”; 方法如下: 背景图尺寸(数值表示方式): 代码如…

    2025年12月24日
    000
  • 10个 你可能不熟悉的 css伪类 及其用例介绍

    css 伪类是用于向某些选择器添加特殊的效果,是动态的,指当前元素所处的状态或者特性。只有一个元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又会失去这个样式。 这篇文章在一定程度上鼓励你在构建UI时使用更简单的CSS和更少的 JS。熟悉 CSS 所提供的一切是实现这一目标的一种方…

    2025年12月24日 好文分享
    000
  • CSS Position 属性值有哪些?

    CSS Position属性值有:1、static,是position的默认值;2、fixed,生成固定定位的元素;3、absolute,生成绝对定位的元素;4、relative,生成相对定位的元素;5、inherit,继承父级属性值。 1、position: relative;相对定位 不影响元素…

    2025年12月24日
    000
  • 使用CSS如何绘制五角星?(附代码)

    下面本篇文章给大家介绍一下如何使用纯CSS绘制五角星、六角形、五边形、六边形、心形。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 1、五角星 #star-five { margin: 50px 0; position: relative; display: block; colo…

    2025年12月24日 好文分享
    000
  • 你一定要知道的css属性值规范

    1、如果值是0,通常都不用带单位 例如: .list{ border: 1px solid 0px; margin: 0px;} 改成: .list{ border: 1px solid 0; margin: 0;} 但是有个特例,就是和时间有关的时间单位都要带上秒s,如下两个都是不合法的: tra…

    2025年12月24日
    000
  • 纯css实现加号“+”效果(代码示例)

    本篇文章来给大家通过代码示例介绍一下使用纯css实现加号“+”效果的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 实现下图的加号效果: 若想实现这个效果, 只需一个div元素即可搞定。 立即学习“前端免费学习笔记(深入)”; 需要用到css的为了before和after, …

    2025年12月24日 好文分享
    000
  • 为什么不建议使用@import引入css

    不建议使用@import主要有以下两点原因: 原因一、使用@import引入CSS会影响浏览器的并行下载 使用@import引用的CSS文件只有在引用它的那个css文件被下载、解析之后,浏览器才会知道还有另外一个css需要下载,这时才去下载,然后下载后开始解析、构建render tree等一系列操作…

    2025年12月24日
    000
  • CSS 预处理器

    CSS 预处理器是什么?一般来说,它们基于 CSS 扩展了一套属于自己的 DSL(Domain Specific Language),来解决我们书写 CSS 时难以解决的问题: 语法不够强大,比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器;没有变量和合理的样式复用机制,使得逻辑上相关的属性…

    好文分享 2025年12月24日
    000
  • CSS 中伪类的使用(干货)

    css 伪类是用于向某些选择器添加特殊的效果,是动态的,指当前元素所处的状态或者特性。只有一个元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又会失去这个样式。 这篇文章在一定程度上鼓励你在构建UI时使用更简单的CSS和更少的 JS。熟悉 CSS 所提供的一切是实现这一目标的一种方…

    2025年12月24日 好文分享
    000
  • 使用CSS实现皮卡丘

    前言 当我学完css和js后,冒出来一个想法。自己去实现一个可爱的卡通人物。于是我就去codepen找素材,最终选择了皮卡丘,如下图。 准备工作 在开始写皮卡丘之前,我先观察了皮卡丘的整个页面。发现如果要很好的实现这个皮卡丘你不能像写传统网页那样从左到右布局,而是要从中间布局,因为左右两边对称。理清…

    2025年12月24日 好文分享
    000
  • 如何使用css来控制页面

    使用css对页面进行全方位的控制,主要的方法有四种:行内样式、内嵌式、链接式和导入式,下面我们来分别看一下这四种方式: 一、行内样式 1、特点:最为直接的一种。 2、使用方式 直接在HTML的标记中,使用style属性,将CSS代码写在其中。 立即学习“前端免费学习笔记(深入)”; 3、举例说明 页…

    2025年12月24日 好文分享
    000
  • 利用css动画属性rotate来实现镜像翻转

    要实现镜像翻转,有两种实现方法: 方法一:利用css动画属性rotate旋转来实现 具体代码: .mirrorRotateLevel { transform: rotateY(180deg); /* 水平镜像翻转 */}.mirrorRotateVertical { transform: rotat…

    2025年12月24日
    000
  • css中实现背景透明的三种方式

    css中实现背景透明通常有如下3种方式,以下是这三种方式的不透明度为80%的写法: css3的opacity:x,x 的取值从 0 到 1,如opacity: 0.8 css3的rgba(red, green, blue, alpha),alpha的取值从 0 到 1,如rgba(255,255,2…

    2025年12月24日
    000
  • 结构性伪类选择器—nth-child实现彩色表格案例(代码实例 )

    本文目标: 1、掌握css中结构性伪类选择器—nth-child的用法 问题: 1、实现以下效果,且使用纯DIV+CSS,必须使用结构性伪类选择器—nth-child 当鼠标悬停在某个单元格上时,背景变成紫色 附加说明: 1、每个单元格宽145,带1个像素边框,左边padding为5,上下paddi…

    2025年12月24日 好文分享
    000

发表回复

登录后才能评论
关注微信