简单了解伪类和伪元素的区别

使用伪元素的时候，总是感觉和伪类很相似，但又不能详细的说出两者的区别和联系，那么两者到底有什么区别和联系呢？下面我们就来聊聊两者，这个介绍的不多，主要还是聊聊伪元素的一些特点，这里不怎么写具体的实例，详细的应用后续我会做出详细的总结。

伪类的定义：

伪元素的定义：CSS伪元素是用来添加一些选择器的特殊效果。

伪元素的语法：CSS伪类是用来添加一些选择器的特殊效果。

哈哈，除了伪类和伪元素不同，其他的好像都一样，所以它们俩的有区别吗，到底有什么区别，嗯、下面我们就来看看

selector:pseudo-element {property:value;}

伪类的语法：

selector:pseudo-class {property:value;}

CSS3中的标准是伪类使用单冒号“:” 。而伪元素使用双冒号“::”（避免混淆）、但是在此之前无论是伪类还是伪元素都使用单冒号“:” 所以为了保证兼容伪元素两种使用方法都是可以的、但是低版本IE有双冒号兼容问题、所以以前编写样式的人们对于伪类和伪元素就干脆统统使用单冒号、导致这种混淆一直延续下来

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

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

伪类与伪元素的区别与联系

在计算权重的时候：伪类与类优先级相同、伪元素与标签优先级相同

伪类与伪元素都是用于向选择器加特殊效果
伪类与伪元素的本质区别就是是否抽象创造了新元素
伪类只要不是互斥可以叠加使用
伪元素在一个选择器中只能出现一次，并且只能出现在末尾
伪类与伪元素优先级分别与类、标签优先级相同

伪元素使用时的注意事项

1、伪元素如果没有设置content属性，那么伪元素是无用的（可以将伪元素的内容设置为空）

2、插入的内容在页面的源码里是不可见的，只能在css里面可见

3、插入的伪元素默认情况是内联元素，因此，为了给插入元素赋予高度，外边距、填充等等，必须显式定义它是一个块级元素。

4、典型的css继承规则适用于插入的伪元素，比如，插入的字体系列，然后伪元素会像其他元素一样继承这些字体系列，同样的，伪元素不会继承没有自然继承自父元素（如padding和margin）的样式。

5、使用伪元素插入非文本内容

我简要的提醒，你可以把属性的值置为空字符串或是插入文本内容。伪元素的content也可以包含除文本外，另两个额外的值

首先，你可以包含一个指向一个图像的URL，就像在css里包含一个背景图像一样做你能做的

p:before {   content: url(image.jpg);
}

注意不能使用引号。如果你将URL用引号括起来，那么它会变成一个字符串和插入文本“url(image.jpg)”作为其内容，插入的而不是图像本身。

当然，你可以包含一个Data URI代替图像引用，正如你可以用css背景一样。

你还可以选择ATRR(X)中的函数的形式。此功能，根据规范?，“把X属性的值以字符串的形式返回”

下面是一个例子：

a:after {   content: attr(href);
}

attr（）函数的功能是什么？它得到特定属性的值并把它作为插入的文本成为一个伪元素。

上面的代码会导致页面上的每一个<a>元素的href值立即被放置在每个各自的<a>元素的后面。在文档被打印时，它可以用作一个包含所有URl的打印样式表。

你也可以用这个函数去获取元素的title属性，或者甚至是microdata的值。当然，并不是所有的例子都符合自己的实际，但根据不同的情况，一个特定的属性值作为一个伪元素可以是实际的

然而，获取title或者图像的alt的值并作为实际的伪元素显示在页面上是不可能的。记住伪元素必须是被应用元素的子元素。图像，这是void(或者是空元素)，没有子元素，所以它在这个列子中不可用，同样也适用于其他空元素，例如：<input>。
可怕的浏览器兼容性

任何前端技术的发展势头，第一个问题就是浏览器的支持。在这种情况之下，它不是个很大的问题。

浏览器支持:before 和 :after 伪元素栈，像这样：

Chrome 2+,
    Firefox 3.5+ (3.0 had partial support),
    Safari 1.3+,
    Opera 9.2+,
    IE8+ (with some minor bugs),在IE8中运行，必须声明 <!DOCTYPE> 。
    几乎所有的移动浏览器。

唯一真正的问题是没有获得支持的（不用奇怪）IE6和IE7。

一些提醒

正如前面提到的，伪元素不会出现在DOM中。这些元素不是真正的元素。因此，它们不是可用的。所以，不要使用伪元素生成内容，是您的网页的可用性和可访问性的关键。

一些内容参考http://www.jb51.net/css/332483.html

简单了解伪类和伪元素的区别相关推荐

CSS3伪类和伪元素的特性和区别
前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus,:hover以及<a>标签的:link.visited等,伪元素较常见的比如:before.:after等. 其 ...
【响应式Web前端设计】CSS3伪类与伪元素的区别
首先先来看看伪类与伪元素的定义 w3c中对于它们是这么解释的 CSS中伪类与伪元素的概念是很容易混淆的,今天就来谈谈伪类与伪元素之间的区别伪类:用于向某些选择器添加特殊的效果伪元素:用于将特殊的效 ...
伪类、伪元素、锚伪类
伪类 CSS2中对伪类的定义是:CSS 伪类用于向某些选择器添加特殊的效果. 截止css2,伪类有以下几种: CSS3中对伪类的定义如下: 伪类存在的意义是为了通过选择器找到那些不存在与DOM树中的信 ...
java的string访问某个元素_CSS伪类与伪元素总是傻傻分不清，这份总结够面试用了
熟悉前端的人都会听过 css 的伪类与伪元素,然而大多数的人都会将这两者混淆.本文从解析伪类与伪元素的含义出发,区分这两者的区别,并且列出大部分伪类与伪元素的具体用法,即使你有用过伪类与伪元素,但里面 ...
【重识 HTML + CSS】CSS 伪类、伪元素
CSS 伪类.伪元素伪类 (pseudo-classes) 动态伪类 (dynamic pseudo-classes) :link.:visited.:hover.:active :focus 目标 ...
CSS复合选择器（交集、并集、后代、子元素、兄弟、伪类、伪元素）
CSS复合选择器总结复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签. :first-child与:first-of-type区别 :fi ...
伪类和伪元素的区别及使用场景
1. 伪类和伪元素的区别 1.1 作用不同伪类是一种状态,可以看看做是选择器.比如鼠标经过伪类 :hover , 比如结构伪类 li:nth-child, 一个冒号. 伪元素是元素, 简单来 ...
css伪类和伪元素的特性和区别
伪元素是真的有元素前者是单冒号,后者是双冒号总结一下伪类与伪元素的特性及其区别: 伪类本质上是为了弥补常规CSS选择器的不足,以便获取到更多信息: 伪元素本质上是创建了一个有内容的虚拟容器: CS ...
伪类和伪元素的区别？
一.简单区分伪类用于当已有元素处于某种状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的.也就是说,当用户悬停指定的元素时,我们可以通过:hover来描述这个元素的状态. 伪元素用于创建 ...

简单了解伪类和伪元素的区别

简单了解伪类和伪元素的区别相关推荐

最新文章

热门文章