css中伪类与伪元素的区别

一：伪类：
1:定义：css伪类用于向某些选择器添加特殊效果。
伪类其实与普通的css类相类似，可以为已有的元素添加样式，但是他只有处于dom无法描述的状态下才能为文档树中的元素添加样式，所以将其称为伪类。

2:伪类选择器有哪些:
1）:link向未被访问的链接添加样式（链接，看来是只用于<a>）
2）:visited向已被访问过的链接添加样式（链接，看来还是只用于<a>）
3）:hover当鼠标悬浮在元素上方时，向元素添加样式（没有特意指定必须是链接，所以这个标签被大量用于定义任何一个块/行元素在鼠标经过时的样式）
4）:active向被激活的元素添加样式（当鼠标点击时的样式，要注意是点击时的样式的变化，这个也不是只有超链接才能用的伪类选择器）
5）:focus向拥有键盘输入焦点的元素添加样式（如input输入框鼠标点击时产生背景颜色的变化，注意是键盘输入焦点。注意有些浏览器不支持此功能样式）
6）:first-child 用于匹配父元素中的第一个元素。例如E:first-child,找的是E元素，E元素必须是他的父元素的第一位元素（扩展【：nth-child(n)】用于匹配父元素的第n个子元素E，这个父元素必须是元素E的父元素。）。
7）:lang向带有指定lang属性的元素添加样式（在标签中设置lang的属性，在样式表中对这种确切lang属性值的元素进行样式的设定，即使你有能力为不同的语言定义特殊的规则）
二：伪元素：
1:伪元素用于创建一些不在文档树中的元素，并且为他添加样式，举个例子：使用伪元素”：：before”可以在一个元素前边增加一些文本，并且可以为这些文本添加一些样式，虽然用户可以看到这写文本，但是这些文本是不存在于文档树中的。
2:几种常见的伪元素：
1）:frist-letter用于向文本中的第一个字母添加样式
2）:first-line向文本的首行添加样式
3）:before在元素之前添加内容
4）:after在元素之后添加内容
三:伪元素和伪类的区别：
（1）伪类和伪元素的最大区别就在于有没有创建一个文档树以外的元素。伪元素创建了一个文档树以外的元素（虚拟容器）并为他添加样式，这个容器不包含任何DOM元素但是可以包含内容。换句话说伪类和伪元素的区别就是伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档树以外的元素。
（2）伪类使用的是单冒号，但是在css3中规定伪元素使用的双冒号，但是除了少部分的伪元素必须使用双冒号以外，像after还有before都是支持单引号的。为了兼容性所以目前还是在使用一些常见的伪元素的时候采用单冒号较为稳妥。

转载于:https://www.cnblogs.com/lal520/p/9786572.html

css中伪类与伪元素的区别相关推荐

css中伪类和伪元素有什么不一样
css中的伪类[:]和伪元素[::]都是我们日常开发过程中会用到的伪元素选择器,有时候我们用的是[:],有时候用的又是[::],有时候又好像两者都行,这到底是为什么呢?今天我们就来看看这两个东西到底有 ...
CSS中的伪类和伪元素（详细）
这篇想要跟大家分享的是css中的伪类和伪元素,有任何问题可以私聊我或者评论哦! 首先,我们先来想一下一.引入伪类跟伪元素的原因? 伪类和伪元素的引入是因为在文档树里有些信息无法被充分描述比如CSS ...
谈谈css中的伪类和伪元素,谈谈css中的伪类和伪元素
熟习前台的人都会听过css的伪类与伪元素,然而大多数的人都会将这两者混淆.本文从解析伪类与伪元素的含义出发,区分这两者的区别,并且列出大部分伪类与伪元素的具体用法. css选择器 css选择除了我们常 ...
CSS 伪类与伪元素
CSS的元素选择器除了根据id(#).class(.).属性([ ])选取元素以外,还有很重要的一类,就是根据元素的特殊状态来选取元素.它们就是伪类和伪元素.跟id选择器.类选择器.属性选择器以及派生 ...
理解css伪类和伪元素
伪类就是可以通过直接添加一个类样式达到同等效果,而伪元素,则需要先添加一个元素,然后在元素上添加样式才能达到同等效果伪类 :active 向被激活的元素添加样式. :focus 向拥有键盘输入焦点的 ...
十三、CSS 3新特性详解（一）——属性、结构伪类、伪元素选择器，nth-child与nth-of-type区别，2D rotate，calc函数、滤镜filter、过渡transition
七.CSS3 属性选择器(上) 什么是 CSS3 在 CSS2 的基础上拓展.新增的样式 CSS3 发展现状移动端支持优于 PC 端 CSS3 目前还草案,在不断改进中 CSS3 相对 H5,应用非 ...
php中的css类怎么查找,CSS 样式表中的类和伪类
在CSS中,模式(pattern)匹配规则决定那种样式规则应用于文档树(document tree)的哪个元素.这些模式叫着选择符(selector). 一条CSS规则(rule)是选择器{属性:值; ...
【重识 HTML + CSS】CSS 伪类、伪元素
CSS 伪类.伪元素伪类 (pseudo-classes) 动态伪类 (dynamic pseudo-classes) :link.:visited.:hover.:active :focus 目标 ...
CSS复合选择器（交集、并集、后代、子元素、兄弟、伪类、伪元素）
CSS复合选择器总结复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签. :first-child与:first-of-type区别 :fi ...

css中伪类与伪元素的区别

css中伪类与伪元素的区别相关推荐

最新文章

热门文章