css 伪类和伪元素区别
关于伪类和伪元素，一直有点不清楚，今天是时候好好翻翻了，势必得整的明明白白的
之前看了一个博客说，伪元素是创建了一个新的元素且只是逻辑上的创建，DOM并不存在，没有办法使用JS去获取，而伪类是一个已经存在但是不能直接看到的元素，是存在DOM，但是没有特别声明，看不到，【这个是有一定的道理，但是不是特别的正确】
伪类：定义选择器的一些特殊效果，一个选择器中可以写多个伪类
伪元素：也称为伪元素
伪元素也称为伪对象，它不存在于 DOM 文档中、是一个虚拟的元素。它可以用来代表某个元素的子元素，但是这个子元素并不存在于文档树中。
1. 动态伪类/元素选择器
:link。元素被定义了超链接但并未被访问过
:visited。元素被定义了超链接并已被访问过
:active。元素被激活
:hover。鼠标悬停
:focus。元素获取焦点
2. UI 元素状态伪类/元素选择器 （ 主要是针对form表单元素 ）
:checked。选中的复选按钮或者单选按钮表单元素
:enabled。所有启用的表单元素
:disabled。所有禁用的表单元素
3. 结构伪类/元素选择器
:fisrt-child。父元素的第一个子元素
:last-child。父元素的最后一个子元素的元素
:root。元素所在文档的根元素。在 HTML 文档中，根元素始终是 html，此时该选择器与 html 类型选择器匹配的内容相同
:nth-child(n)。父元素的第 n 个子元素。其中 n 可以是整数（1，2，3）、关键字（even，odd）、也可以是公式（2n+1）,而且 n 值起始值为 1，而不是 0。
:nth-last-child(n)：父元素的倒数第 n 个子元素。此选择器与 :nth-child(n) 选择器计算顺序刚好相反，但使用方法都是一样的，其中 :nth-last-child(1) 始终匹配最后一个元素，与 last-child 等同。
:nth-of-type(n) 。父元素内具有指定类型的第 n 个元素
:nth-last-of-type(n)。父元素内具有指定类型的倒数第 n 个元素
:first-of-type。父元素内具有指定类型的第一个元素，与 nth-of-type(1) 等同
:last-of-tye 。父元素内具有指定类型的最后一个元素，与 :nth-last-of-type(1) 等同
:only-child 。父元素只包含一个子元素，且该子元素匹配元素
:only-of-type。选择父元素只包含一个同类型子元素，且该子元素匹配选择元素
:empty。选择没有子元素的元素，而且该元素也不包含任何文本节点
css 伪类和伪元素区别相关推荐
- 详解 CSS 属性 - 伪类和伪元素的区别
2019独角兽企业重金招聘Python工程师标准>>> CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择 ...
- css中伪类与伪元素的区别
一:伪类: 1:定义:css伪类用于向某些选择器添加特殊效果. 伪类其实与普通的css类相类似,可以为已有的元素添加样式,但是他只有处于dom无法描述的状态下才能为文档树中的元素添加样式,所以将其称为 ...
- CSS 属性 - 伪类和伪元素的区别
伪元素和伪类之所以这么容易混淆,是因为他们的效果类似而且写法相仿,但实际上 css3 为了区分两者,已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示. :Pseudo-classes : ...
- 十三、CSS 3新特性详解（一）——属性、结构伪类、伪元素选择器，nth-child与nth-of-type区别，2D rotate，calc函数、滤镜filter、过渡transition
七.CSS3 属性选择器(上) 什么是 CSS3 在 CSS2 的基础上拓展.新增的样式 CSS3 发展现状 移动端支持优于 PC 端 CSS3 目前还草案,在不断改进中 CSS3 相对 H5,应用非 ...
- css伪类和伪元素的特性和区别
伪元素是真的有元素 前者是单冒号,后者是双冒号 总结一下伪类与伪元素的特性及其区别: 伪类本质上是为了弥补常规CSS选择器的不足,以便获取到更多信息: 伪元素本质上是创建了一个有内容的虚拟容器: CS ...
- css伪类与伪元素的区别
css伪类与伪元素的区别 1.伪类(pseudo-classes) 2.伪元素(Pseudo-elements) 3.伪类与伪元素的区别 1.伪类(pseudo-classes) 其核心就是用来选择D ...
- CSS之 :before :after的用法，伪类和伪元素的区别
一::before && :after的用法 :before 如同对伪元素的名称一样,:before 是用来给指定的元素的内容前面插入新的内容.举例说明: .before:before ...
- css伪类和伪元素的区别
1.伪类 伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,而不是元素的id.class.属性([])等静态的标志.由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能得到一 ...
- css3和css伪类和伪元素区别与兼容性
单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素. 伪元素由双冒号和伪元素名称组成.双冒号是在当前规范中引入的,用于区分伪类和伪元素.但是伪类兼容现存样式,浏览器需要同时支持旧的伪类,比 ...
最新文章
- SAP中程序间的相互调用，SUBMIT关键字的用法
- SQL-字符串运算符和函数
- 探讨一个好算法——找出一百万个数字中十个最大数字的算法
- 一次性视频内窥镜行业调研报告 - 市场现状分析与发展前景预测（2021-2027年）
- win 7系统连接WIFI
- 达思sql数据库修复软件：用友金蝶管家婆思迅中了勒索病毒怎么办？
- nbu备份nas文件服务器,NBU网络备份大全之远程配置备份策略
- excel软件php函数,excel的函数
- linux hg 图形,Linux下Mercurial (hg)配置说明
- Android 官方推荐 : DialogFragment 创建对话框
- pcm设备的注册流程
- 2022年8月11日：使用 ASP.NET Core 为初学者构建 Web 应用程序--使用 ASP.NET Core 控制器创建 Web API（没看懂，需要再看一遍）
- docker镜像仓库habor1.10.0安装配置-单机版
- 小米机器人虚拟墙设置_大家都有就它独缺，姗姗来迟的虚拟墙方案终更新，小米扫地机器人...
- Linux常用命令(penguin)
- OpenStack基础知识及搭建云平台先电的基本虚拟机配置
- dbus 嵌入式linux,MeeGo操作系统DBus调试工具
- MapReduce任务卡在Running Job状态的多种解决方法
- Office Online Server概述
- #教计算机学画卡通人物#生成式对抗神经网络GAN原理、Tensorflow搭建网络生成卡通人脸