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的情况。

(学习视频推荐:css视频教程)

伪元素

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

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

::first-letter

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

::first-line

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

::before

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

::after

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

以上就是css中”:“和”::“有什么区别么的详细内容,更多请关注创想鸟其它相关文章!

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月24日 05:05:17
下一篇 2025年12月24日 05:05:29

相关推荐

  • 如何利用css画出一个三角形

    首先我们来看一下效果图: (视频教程推荐:css视频教程) 实现代码: /* css3绘制三角形 */ .triangle{ width: 0px; /*设置宽高为0,所以div的内容为空,从才能形成三角形尖角*/ height: 0px; border-bottom: 200px solid #0…

    2025年12月24日 好文分享
    000
  • css中@有哪些用法

    CSS代码中经常会有@命令的应用,且功能多样。语法结构基本是一致的,@后面紧跟一个关键字,用于规定各自的功能。 at-rule是一个声明,为CSS提供执行或怎么表现的指令。每个声明以@开头,后紧跟一个可用的关键字,这个关键字充当一个标识符,用于表示CSS该做什么。这是一个通用的语法,尽管每个at-r…

    2025年12月24日
    000
  • css设置背景透明度有什么方式

    实现背景透明有多种方式,本文为大家介绍以下两种方式: (相关教程推荐:CSS教程) 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
  • css如何设置相邻单元格边框之间的距离

    我们先来看下实现效果: (推荐教程:CSS教程) 可以利用 border-spacing 属性来设置相邻单元格的边框间的距离(仅用于“边框分离”模式)。 立即学习“前端免费学习笔记(深入)”; 具体代码: border-collapse: separate;border-spacing: 0px 1…

    2025年12月24日
    000
  • css实现卡片式图片效果

    首先我们来看一下效果图: (推荐教程:CSS教程) html代码: 立即学习“前端免费学习笔记(深入)”; @@##@@ 打破企业间壁垒,提供便捷的接入方式,实现不企业,不同品牌、不同类型间的家电的数据互联互通和数据协同 css代码: .card img { width: 100%;}.card{ …

    2025年12月24日
    000
  • css如何为div添加阴影效果

    本文为大家分享了css为div添加阴影的方法,希望可以帮助到大家。 (相关推荐:CSS教程) 代码实现: .mydiv{ width:250px; height:auto; border:#909090 1px solid; background:#fff; color:#333; filter:p…

    2025年12月24日
    000
  • 纯css代码实现简单下拉菜单效果

    实现方法: (推荐教程:CSS教程) 1、用ul 和 li标签写一个关联结构(ul 和 li的父子关系浑然天成,一般的关联结构都用它们) 服装 衬衫 棉袄 裤衩 2、对界面进行初始化(万金油式开头) 立即学习“前端免费学习笔记(深入)”; *{ padding: 0; margin: 0; } 3、…

    2025年12月24日
    000
  • css实现点击切换图片效果

    我们先来看下效果图: (相关教程:CSS教程) 切换前: 立即学习“前端免费学习笔记(深入)”; 切换中: 切换成功: HTML代码: 来自Limou的尝试解读来自Limou的尝试解读12341234Images1Images2Images3Images4Images1Images2Images3I…

    2025年12月24日 好文分享
    000
  • css中的“计算属性”是什么

    首先本文要讲的计算属性和vue的计算属性没有一点关系。 (推荐教程:CSS教程) 相信大家开发中遇到过这样的问题: 我设计样式,多用百分比布局,这样在不同分辨率就不会出现特别大的偏差,但是也不能避免不适用px等固定单位,所以当我们父元素分为2部分,头部使用了像素px,但是底部需要剩下所有的大小怎么办…

    2025年12月24日
    000
  • 你会使用css锚点么

    CSS锚点使用有两种方法,我建议使用下面这种: (推荐教程:CSS教程) 到达第一个锚点 到达第二个锚点 我是第一个锚点 我是第一个锚点 这样当我们点击A链接时, 对应的DOM节点就会滚动到窗口顶部。 但有时我们的需求并不是让它滚动到窗口顶部。 可能要他距离顶部有一定的距离。这时候可以由以下方法解决…

    2025年12月24日
    000
  • css实现可收缩的上下左右布局

    首先我们来看一下实现效果: (推荐教程:CSS教程) 代码实现: 立即学习“前端免费学习笔记(深入)”; 布局 * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } .left { width: 220px; h…

    2025年12月24日
    000
  • css实现一个简单的扁平化按钮

    我们先来看下按钮样式: (推荐教程:CSS教程) 具体代码: 立即学习“前端免费学习笔记(深入)”; 打印//js写法$(“#btn”).css({“font-family”: “‘微软雅黑’,’Helvetica Neue’,Helvetica,Arial,sans-serif”,”font-si…

    2025年12月24日
    000
  • 谈谈css中的3种预处理器

    本篇文章给大家介绍一下三种css预处理器的,以及比较一下,了解他们之间的差异。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 一、介绍 CSS预处理器定义了一种新的语言,基本的思想是用一种专门的编程语言,开发者只需要使用这种语言进行编码工作,减少枯燥无味的CSS代码的编写过程的同时…

    2025年12月24日
    000
  • 前端常见css的面试题目

    随着疫情的不断好转,各地都开始逐步的复工,当然对我们来说,也马上迎来所谓的金三银四跳槽季。在此,分享自己在前端领域中积累的一些经验,供自己温故知新。   对于前端来说,涉及的知识面广,内容繁多,但是万变不离其宗,主要也就是围绕着html(5),css(less,scss,sass,styus,css…

    2025年12月24日
    000
  • 谈谈CSS实现水平垂直居中布局的方法

    最近面试的时候,面试官问到了CSS水平垂直居中布局的方式,对于刚入前端没多久的我,无疑是一脸懵逼,闲了赶紧查阅资料分析一波,给各位分享一下,避免落坑。 首先先说明一下html和一些基础css样式,下面就不再赘述!html 垂直水平居中 公共css代码如下 /* 公共样式 */.div1{width:…

    2025年12月24日
    000
  • 在html元素中设置css样式的方式是什么

    如果我们要在HTML元素中设置CSS样式,那么我们就需要在元素中设置”id” 和 “class”选择器。 (推荐教程:CSS教程) 下面我们来分别说一下id选择器和class选择器。 id选择器 立即学习“前端免费学习笔记(深入)”; id 选择器可以…

    2025年12月24日
    000
  • css如何设置透明度不会影响子元素

    通过RGBA设置透明度,只有最新的浏览器支持,支持IE9+,可通过RGBA的alpha通道的方式设定。 (推荐教程:CSS教程) 显示文字 前三个值是rgb的颜色值,最后一个透明度的值,取值为0~1,值越小越透明。 兼容所有浏览器写法: 立即学习“前端免费学习笔记(深入)”; background-…

    2025年12月24日
    000
  • css怎样实现DIV高度自适应

    可以添加表格特性。 (推荐教程:CSS教程) 父级元素添加属性  display: table; 子一级元素添加属性 display: table-cell; 立即学习“前端免费学习笔记(深入)”; 代码: .div-row { width: 400px; border: 1px solid #23…

    2025年12月24日 好文分享
    000
  • css中的五种常见页面布局

    公共样式部分代码: (推荐教程:CSS教程) html * { margin: 0; padding: 0; } .layout { margin-bottom: 20px; } .layout article { width: 100%; } .layout article > div { …

    2025年12月24日 好文分享
    000
  • 利用css实现鼠标悬停效果

    我们先来看下效果: (推荐教程:CSS教程) html代码: 立即学习“前端免费学习笔记(深入)”; 这是是pic-1 这是是pic-2 这是是pic-3 css代码: html { box-sizing: border-box; font: 18px PT Mono; background: an…

    2025年12月24日
    000

发表回复

登录后才能评论
关注微信