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

2021年9月17日 3点热度 0条评论 来源: 冰雪为融

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

伪类的定义:

伪元素的定义: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



    原文作者:冰雪为融
    原文地址: https://blog.csdn.net/lhjuejiang/article/details/79807748
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。