伪类和伪元素的区别

news/2024/7/4 0:53:55 标签: class, 伪元素-伪类
class="baidu_pl">
class="article_content clearfix">
class="markdown_views prism-atom-one-dark">

(理解)伪类和伪元素的区别

学习这么长时间对于一些基本点还是不太理解,所以在这里进行了区分

第一种理解

    伪类用于向某些选择器添加特殊的效果。
    伪元素用于将特殊的效果添加到某些选择器。

第二种理解

伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到,这也是为什么他们一个称为伪类,一个称为伪元素的原因。

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

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

伪元素和伪类之所以这么容易混淆,是因为他们的效果类似而且写法相仿,但实际上 [css3]为了区分两者,已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示。

class="prettyprint">class=" hljs cs">`:Pseudo-classes         class="hljs-comment">//伪类

::Pseudo-elements       class="hljs-comment">//伪元素

但因为兼容性的问题,所以现在大部分还是统一的单冒号,但是抛开兼容性的问题,我们在书写时应该尽可能养成好习惯,区分两者。


伪元素选择器

::first-line 匹配文本块的首行
::first-letter 选择文本块的首字母 :
:before 与 ::after ——使用 contnet 属性生成额外的内容并插入在标记中:


伪类选择器

E F:nth-child(n):该选择器定位元素E的第n个子元素的元素F:
div.class p:nth-child(3) {color:#f00;} //class=”class”的div容器里的第3个元素p,如果第3个子元素不是p,此样式将失效

E F:nth-last-child(n):该选择器定位元素E的倒数第n个子元素的元素F;
E:nth-of-type(n):该选择器定位元素E的第n个指定类型子元素;
E:nth-lash-of-type(n):该选择器定位元素E的导数第n个指定类型子元素:
.class p:nth-child(2) 与 .class p:nth-of-type(2) 的区别在于,如果.class里的第2个子元素不是P元素时,.class p:nth-child(2) 的样式将无效,而.class p:nth-of-type(2) 将定位在 .class 里的第2个p元素

nth-child(n)、nth-last-child(n)、nth-of-type(n)、nth-last-of-type(n),这其中的 n 可以使用数字静态式,比如 .nth-child(2n+1) 将匹配第1、3、5…个元素

E:first-child:父元素的第一个子元素E,与:nth-child(1)相同;
E:last-child:父元素的倒数第一个子元素E;
E:first-of-type:与:nth-of-type(1)相同;
E:last-of-type:与:nth-last-of-type(1)相同;
E:only-child:父元素中唯一的子元素E;
E:only-of-type:父元素中唯一具有该类型的元素E;
E:empty:没有子元素的元素,没有子元素包括文本节点;
E:lang(en):具有使用双字母缩写(en)表示的语言的元素;
E:not(exception):该选择器将选择与括号内的选择器不匹配的元素:
:root —— root 选择页面的根元素
p:not(.item3)——not 排除某个或者某类元素——not(被排除的元素)
div:empty——指定的前面选择器所选的元素内容为空则生效。

–input的伪类选择器–
input:focus——当输入框获取焦点的时候应用此样式
input:enabled——起用状态下的样式
input:disabled——禁用状态下的样式
input:read-only——在输入框为只读状态下的样式
input:read-write——输入框为可读可写状态下的样式
input:checked——checked 表示选中状态下checkbox 的样式
input:indeterminate + label——checkbox 半选择状态下的样式
indeterminate——需要配合JS来使用(以下是JS代码)

class="prettyprint">class=" hljs cs">class="hljs-keyword">var checkBox = document.querySelector(class="hljs-string">"#box6>input");
class="hljs-comment">//半选择状态 只能用js来设置
checkBox.indeterminate = class="hljs-keyword">true;

http://www.niftyadmin.cn/n/781412.html

相关文章

如何区分netty是udp还是tcp_眼睛疲劳到底热敷还是冷敷?眼科医生教你如何正确区分...

上班族天天盯着电脑很容易就视线模糊、眼睛疲劳眼睛不舒服多数人都会考虑敷眼来缓解那么问题来了,冷敷?热敷?厦门市中医院眼科祁磊医生说,要是想缓解视疲劳,还是选用热敷比较靠谱。祁医生表示,热敷能够起到促进血液循…

js事件委托和文档碎片

json格式转换 JSON.parse() 方法用于将一个 JSON 字符串转换为对象。 JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。 文档碎片 —— 在你需要用js创建多个节点时,可以使用document.createDocumentFragment() 例子 var frag document.creat…

表单字段三维数组名_案例分析|某装配式住宅项目结构设计和BIM应用(艾三维BIM分享)...

本文以郑州市第一个全部采用装配式剪力墙结构体系建造的住宅小区为例,介绍了该项目装配式住宅结构设计,包括装配率的计算、结构分析、主要连接截面设计和构造。分析表明,环筋扣合锚接连接能够满足受力要求,安全可靠。运用 BIM对此…

cpu线程_Cpu基础知识,用通俗易懂的方式理解主频、核心、线程等

1.体系结构(关键)CPU的体系结构越新越好。所谓的旧建筑和新建筑可以理解为两个人一起移动的砖头。旧架构使用后退设备移动砖块,而新架构使用更先进的设备移动砖块。因此,体系结构对性能有巨大影响,并且是CPU最重要的参数之一。2.主频主频率也…

基础Git集锦(干货)

常用Git集锦 ————git作为一款常用的版本控制系统,在公司里是经常用到的以下是一些常用的git 指令 1、初始化git git init ————这个指令带便初始化Git仓库 当我们进行项目上传时的第一步 2、查看git状态 git status ————查看当前 git仓库的状态 !!!…

win10设置锁屏密码_如何取消Win10锁屏密码?2招教你迅速关闭

对于追求高效率的电脑用户来说,Win10每次开机或锁屏后需要输入密码,显然是太浪费时间。那么,Win10锁屏密码如何取消?今天小编为大家带来2招关闭Win10锁屏密码方法,希望对电脑爱好者小伙伴们有所参考。Win10锁屏密码如何…

angularJS组件化的项目流程

angularjs项目 不管是angular 还是vue 、react等等,作为一个框架最终都服务于一个产品,那么他所包含的所必须的功能就是项目的重点,例如:表单、搜索、购物车等功能。确定完需求,我们就开始项目的搭建。 第一步 || 路由配置 1、…

重绘与回流——影响浏览器加载速度

对于重绘和回流的概念不是很清晰,查看了许多博文,在这里说一下自己的理解!!欢迎同学们与我交流。 1、重绘概念 重绘:对元素的背景颜色,字体样式样式进行设置,如:font-weight、colo…