当前位置: 首页 > news >正文

CSS中一个冒号和两个冒号有什么区别

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

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

伪类有::first-child ,:link:,vistited,:hover:,active:focus,:lang
伪元素有::first-line,:first-letter,:before,:after (在苏沈小雨编的CSS2.0中文手册中把:first-line,:first-letter列为伪类应该是理解上的错误)

提醒,如果你的网站只需要兼容webkit、firefox、opera等浏览器,建议对于伪元素采用双冒号的写法,如果不得不兼容IE浏览器,还是用CSS2的单冒号写法比较安全

伪类和伪元素的区别:

伪类

伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,而不是元素的id、class、属性等静态的标志。由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又会失去这个样式。由此可以看出,它的功能和class有些类似,但它是基于文档之外的抽象,所以叫伪类。

:link

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

:hover

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

:active

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

:visited

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

:focus

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

:first-child

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

:lang

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

伪元素

与伪类针对特殊状态的元素不同的是,伪元素是对元素中的特定内容进行操作,它所操作的层次比伪类更深了一层,也因此它的动态性比伪类要低得多。实际上,设计伪元素的目的就是去选取诸如元素内容第一个字(母)、第一行,选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的,但是它本身只是基于元素的抽象,并不存在于文档中,所以叫伪元素。

::first-letter

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

::first-line

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

::before

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

::after

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


原文:https://blog.csdn.net/sinat_36146776/article/details/53138178

转载于:https://www.cnblogs.com/7qin/p/10657671.html

相关文章:

  • MSF内网渗透 扫描模块
  • [转帖]安德斯·海尔斯伯格
  • [转帖]Linux分页机制之概述--Linux内存管理(六)
  • Linux的远程连接工具:SSH的安装
  • Spring Reference
  • 【大数据应用技术】作业七|爬取全部的校园新闻
  • leetcode 958. Check Completeness of a Binary Tree 判断是否是完全二叉树 、222. Count Complete Tree Nodes...
  • 力扣——二叉树的层次遍历
  • vue工程 使用滚动组件 vue2-better-scroll 实现上拉加载 下拉刷新
  • Python多线程实例
  • loadrunner中web_reg_save_param和web_reg_save_param_ex的区别
  • 理解JavaScript【转】
  • python入门 第一节
  • 1255: 打怪升级(Java)
  • 随笔2
  • Angular 4.x 动态创建组件
  • AzureCon上微软宣布了哪些容器相关的重磅消息
  • C++入门教程(10):for 语句
  • CAP理论的例子讲解
  • Create React App 使用
  • es的写入过程
  • If…else
  • Java 9 被无情抛弃,Java 8 直接升级到 Java 10!!
  • Js实现点击查看全文(类似今日头条、知乎日报效果)
  • JS字符串转数字方法总结
  • php ci框架整合银盛支付
  • 纯 javascript 半自动式下滑一定高度,导航栏固定
  • 基于 Ueditor 的现代化编辑器 Neditor 1.5.4 发布
  • 码农张的Bug人生 - 初来乍到
  • 浅谈Golang中select的用法
  • 小李飞刀:SQL题目刷起来!
  • Oracle Portal 11g Diagnostics using Remote Diagnostic Agent (RDA) [ID 1059805.
  • 你对linux中grep命令知道多少?
  • 哈罗单车融资几十亿元,蚂蚁金服与春华资本加持 ...
  • 教程:使用iPhone相机和openCV来完成3D重建(第一部分) ...
  • ​卜东波研究员:高观点下的少儿计算思维
  • # 20155222 2016-2017-2 《Java程序设计》第5周学习总结
  • #微信小程序:微信小程序常见的配置传旨
  • (14)目标检测_SSD训练代码基于pytorch搭建代码
  • (Mac上)使用Python进行matplotlib 画图时,中文显示不出来
  • (Redis使用系列) SpringBoot 中对应2.0.x版本的Redis配置 一
  • (二)fiber的基本认识
  • (二十三)Flask之高频面试点
  • (附源码)springboot教学评价 毕业设计 641310
  • (九)One-Wire总线-DS18B20
  • (九)信息融合方式简介
  • (三)mysql_MYSQL(三)
  • (三分钟了解debug)SLAM研究方向-Debug总结
  • (四) 虚拟摄像头vivi体验
  • (五)大数据实战——使用模板虚拟机实现hadoop集群虚拟机克隆及网络相关配置
  • (转)LINQ之路
  • (转)编辑寄语:因为爱心,所以美丽
  • *ST京蓝入股力合节能 着力绿色智慧城市服务
  • .bashrc在哪里,alias妙用
  • .gitignore文件_Git:.gitignore