土豆博客

CSS3中的伪类和伪元素

伪类和伪元素都是CSS1和CSS2中的概念,CSS1和CSS2中对伪类的伪元素的区别比较模糊,CSS3才对这两个概念做了相对较清晰的概念,下面看看css2和css3中对这两个概念的定义:

# 一、伪类

(1)CSS2中对伪类的定义:

CSS伪类用于向某些选择器添加特殊的效果。

(2)CSS3给出的定义是:

The pseudo-class concept is introduced to permit selection based on information that lies outside of the document tree or that cannot be expressed using the other simple selectors.

A pseudo-class always consists of a “colon” (:) followed by the name of the pseudo-class and optionally by a value between parentheses.

Pseudo-classes are allowed in all sequences of simple selectors contained in a selector. Pseudo-classes are allowed anywhere in sequences of simple selectors, after the leading type selector or universal selector (possibly omitted). Pseudo-class names are case-insensitive. Some pseudo-classes are mutually exclusive, while others can be applied simultaneously to the same element. Pseudo-classes may be dynamic, in the sense that an element may acquire or lose a pseudo-class while a user interacts with the document.

翻译过来就是:

  • 伪类存在的意义是为了通过选择器找到那些不存在与DOM树中的信息以及不能被常规CSS选择器获取到的信息。

  • 伪类由一个冒号:开头,冒号后面是伪类的名称和包含在圆括号中的可选参数。

  • 任何常规选择器可以在任何位置使用伪类。伪类语法不区别大小写。一些伪类的作用会互斥,另外一些伪类可以同时被同一个元素使用。并且,为了满足用户在操作DOM时产生的DOM结构改变,伪类也可以是动态的。

其实第一段话就囊括CSS3伪类的全部定义了,这段话中指出CSS3伪类的功能有两种:

1.获取不存在与DOM树中的信息。比如<a>标签的:link、:visited等,这些信息不存在与DOM树结构中,只能通过CSS选择器来获取

2.获取不能被常规CSS选择器获取的信息。比如:要获取第一个子元素,我们无法用常规的CSS选择器获取,但可以通过 :first-child 来获取到。

# 二、伪元素

(1)CSS2中对伪元素的定义:

CSS 伪元素用于向某些选择器设置特殊效果。

跟伪类的定义差不多,本来CSS2对伪类和伪元素的定义就是完全一样的:

CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree.

翻译过来:

CSS引入了伪元素和伪类的概念,以允许基于文档树之外的信息进行格式化。

(2)CSS3中伪元素的定义:

Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element’s content. Pseudo-elements allow authors to refer to this otherwise inaccessible information. Pseudo-elements may also provide authors a way to refer to content that does not exist in the source document (e.g., the ::before and ::after pseudo-elements give access to generated content).

A pseudo-element is made of two colons (:? followed by the name of the pseudo-element.

This :: notation is introduced by the current document in order to establish a discrimination between pseudo-classes and pseudo-elements. For compatibility with existing style sheets, user agents must also accept the previous one-colon notation for pseudo-elements introduced in CSS levels 1 and 2 (namely, :first-line, :first-letter, :before and :after). This compatibility is not allowed for the new pseudo-elements introduced in this specification.

Only one pseudo-element may appear per selector, and if present it must appear after the sequence of simple selectors that represents the subjects of the selector.

翻译过来:

  • 伪元素在DOM树中创建了一些抽象元素,这些抽象元素是不存在于文档语言里的(可以理解为html源码)。比如:documen接口不提供访问元素内容的第一个字或者第一行的机制,而伪元素可以使开发者可以提取到这些信息。并且,一些伪元素可以使开发者获取到不存在于源文档中的内容(比如常见的::before,::after)。

  • 伪元素的由两个冒号::开头,然后是伪元素的名称。

  • 使用两个冒号::是为了区别伪类和伪元素(CSS2中并没有区别)。当然,考虑到兼容性,CSS2中已存的伪元素仍然可以使用一个冒号:的语法,但是CSS3中新增的伪元素必须使用两个冒号::。

  • 一个选择器只能使用一个伪元素,并且伪元素必须处于选择器语句的最后。

简单来说,伪元素创建了一个虚拟容器,这个容器不包含任何DOM元素,但是可以包含内容。另外,开发者还可以为伪元素定制样式。

# 三、用法举例

::before 在被选元素之前插入内容。需要指定content属性来插入内容。

<style>
  p::before {
    content: 'Hi,';
  }
</style>

<body>
  <p>小土豆</p> 
  <!-- 浏览器显示 Hi,小土豆-->
</body>

::after 在被选元素之后插入内容。需要指定content属性来插入内容。

<style>
  p::after {
    content: 'Hi,';
  }
</style>

<body>
  <p>小土豆</p> 
  <!-- 浏览器显示 小土豆Hi,-->
</body>

::first-letter 匹配元素中文本的首字母。

<style>
    p::first-letter {
        font-size: 32px;
    }
</style>
<body>
  <p>小土豆</p> 
  <!-- “小”字体变大 -->
</body>

::selection匹配被用户选中的部分。

<style>
    p::selection {
    	background-color: lightcoral;
    }
</style>

<body>
    <p>小土豆小土豆小土豆小土豆小土豆小土豆小土豆</p>
</body>

总结一下伪类与伪元素的特性及其区别:

  • 伪类本质上是为了弥补常规CSS选择器的不足,以便获取到更多信息
  • 伪元素本质上是创建了一个有内容的虚拟容器
  • CSS3中伪类和伪元素的语法不同,伪类的操作对象是文档树中已有的元素,而伪元素则创建了一个文档数外的元素
  • 可以同时使用多个伪类,却只能同时使用一个伪元素
  • 在CSS3中,伪类用单冒号:表示;而伪元素用双冒号::表示
code
top

扫码添加,一起进步

wechat-code

为了保障最佳预览体验,博客已不支持IE浏览器的访问,邀请您使用以下现代高级浏览器。

谷歌浏览器(推荐) 火狐浏览器

注:如果你使用的是360,QQ等双核浏览器,请开启极速模式