Pseudo-classes and pseudo-elements

 

我们将要看到的下一组选择器称为伪类伪元素 . 其中有很多,它们通常用于特定目的. 一旦知道了如何使用它们,您就可以查看列表,以查看是否有某些功能可用于您要实现的任务. 同样,每个选择器的相关MDN页面都有助于解释浏览器支持.

Prerequisites: 基本的计算机知识, 已安装的基本软件使用文件的基本知识,HTML基础(研究HTML简介 )以及CSS的工作原理(研究CSS第一步) .
Objective: 了解伪类和伪元素选择器.

What is a pseudo-class?

伪类是选择器,用于选择处于特定状态的元素,例如,它们是其类型的第一个元素,或者它们被鼠标指针悬停. 它们的行为就像您在文档的某个部分上应用了一个类,通常可以帮助您减少标记中多余的类,并为您提供更灵活,可维护的代码.

伪类是以冒号开头的关键字:

:pseudo-class-name

Simple pseudo-class example

让我们看一个简单的例子. 如果我们想使文章中的第一段变大和加粗,我们可以在该段中添加一个类,然后在该类中添加CSS,如下面的第一个示例所示:

但是,这可能会令人讨厌,如果在文档顶部添加了新段落,该怎么办? 我们需要将班级移至新段落. 除了添加类之外,我们可以使用:first-child伪类选择器-这将始终以文章中的第一个子元素为目标,并且我们将不再需要编辑HTML(无论如何,这总是不可能的,可能是由于它是由CMS生成的.)

所有伪类的行为都与此相同. 它们以处于某种状态的文档为目标,就像您在HTML中添加了一个类一样. 看一下有关MDN的其他一些示例:

User-action pseudo classes

某些伪类仅在用户以某种方式与文档交互时适用. 这些用户操作伪类(有时称为动态伪类 )的行为就像在用户与元素进行交互时已将其添加到元素中一样. 示例包括:

  • :hover —上面提到的; 仅当用户将指针移动到元素(通常是链接)上时,此方法才适用.
  • :focus —仅在用户使用键盘控件聚焦元素时适用.

What is a pseudo-element?

伪元素的行为类似,但是它们的作用就像您在标记中添加了一个全新的HTML元素一样,而不是将类应用于现有元素. 伪元素以双冒号::开头.

::pseudo-element-name

注意 :某些早期的伪元素使用单冒号语法,因此有时您可能会在代码或示例中看到它. 现代浏览器通过单或双冒号语法支持早期的伪元素,以实现向后兼容.

例如,如果您想选择段落的第一行,则可以将其包装在<span>元素中,然后使用元素选择器. 但是,如果您包装的单词数大于或小于父元素的宽度,那将失败. 由于我们往往不知道一行上将容纳多少个单词(如果屏幕宽度或字体大小发生变化,这将会改变),因此无法通过添加HTML来可靠地做到这一点.

::first-line伪元素选择器将可靠地为您执行此操作-如果单词数增加和减少,它仍只会选择第一行.

它就像将<span>神奇地包裹在第一条格式化的行周围,并在每次行长更改时进行更新.

您会看到这选择了两个段落的第一行.

Combining pseudo-classes and pseudo-elements

如果要使第一段的第一行加粗,可以将:first-child::first-line选择器链接在一起. 尝试编辑前面的实时示例,以便它使用以下CSS. 我们说的是,我们要选择第一个<p>元素的第一行,该元素位于<article>元素内.

article p:first-child::first-line { 
  font-size: 120%; 
  font-weight: bold; 
}

Generating content with ::before and ::after

有几个特殊的伪元素,它们与content属性一起使用,以使用CSS将内容插入文档中.

您可以使用它们插入文本字符串,例如下面的实时示例. 尝试更改content属性的文本值,然后在输出中看到它的变化. 您也可以将::before伪元素更改为::after然后查看在元素末尾而不是开头插入的文本.

但是,从CSS插入文本字符串实际上并不是我们在网络上经常要做的事情,因为某些屏幕阅读器无法访问该文本,并且将来可能很难有人找到和编辑.

这些伪元素的更有效用法是插入一个图标,例如在下面的示例中添加的小箭头,这是一种可视指示符,我们不希望屏幕阅读器读出它:

这些伪元素还经常用于插入空字符串,然后可以像在页面上的任何元素一样设置其样式.

在下一个示例中,我们使用::before伪元素添加了一个空字符串. 我们将其设置为display: block ,以便可以使用宽度和高度对其进行样式设置. 然后,我们像使用任何元素一样使用CSS对其进行样式设置. 您可以使用CSS并更改其外观和行为.

在CSS中将::before::after伪元素与content属性一起使用称为"生成的内容",并且您经常会看到此技术用于各种任务. 一个很好的例子是CSS Arrow Please网站,它可以帮助您使用CSS生成箭头. 在创建箭头时查看CSS,您将看到使用::before::after伪元素. 每当您看到这些选择器时,请查看content属性以查看要添加到文档中的内容.

Reference section

伪类和伪元素很多,因此有一个列表可供参考. 下表列出了它们,并带有指向其在MDN上的参考页的链接. 以此为参考,以查看可用于定位的事物类型.

Pseudo-classes

Selector Description
:active 当用户激活(例如单击)元素时匹配.
:any-link 匹配:link:link:visited状态.
:blank 匹配输入值为空的<input>元素 .
:checked 在选定状态下匹配单选按钮或复选框.
:current 匹配当前正在显示的元素或元素的祖先.
:default 匹配一组相似元素中默认的一个或多个UI元素.
:dir 根据其方向性(HTML dir属性或CSS direction属性的值)选择一个元素.
:disabled 匹配处于禁用状态的用户界面元素.
:empty 匹配一个元素,该元素除可选的空白外没有其他子级.
:enabled 匹配处于启用状态的用户界面元素.
:first Paged Media中 ,匹配第一页.
:first-child 与同级中的第一个元素匹配.
:first-of-type 匹配同级中首个具有某种类型的元素.
:focus 当元素具有焦点时匹配.
:focus-visible 当元素具有焦点且焦点应对用户可见时匹配.
:focus-within Matches an element with focus plus an element with a descendent that has focus.
:future 匹配当前元素之后的元素.
:hover 当用户将鼠标悬停在元素上时匹配.
:indeterminate 匹配其值处于不确定状态的UI元素,通常是checkboxes .
:in-range 当元素的值在范围内时,将其与范围匹配.
:invalid 匹配处于无效状态的元素,例如<input> .
:lang 根据语言(HTML lang属性的值)匹配元素.
:last-child 匹配一个在同级中最后一个元素.
:last-of-type 匹配某个类型的元素,该元素在其兄弟姐妹中排在最后.
:left Paged Media中 ,匹配左侧页面.
:link 匹配未访问的链接.
:local-link 匹配指向与当前文档位于同一站点中的页面的链接.
:is() 与传入的选择器列表中的任何选择器匹配.
:not 匹配未通过选择器匹配的内容,这些选择器作为值传递给此选择器.
:nth-child 匹配兄弟姐妹列表中的元素-兄弟姐妹通过an + b形式公式进行匹配(例如2n +1将匹配元素1、3、5、7等.所有奇数元素.)
:nth-of-type 匹配具有某种类型的同级兄弟列表中的元素(例如<p>元素)-兄弟姐妹通过an + b形式公式进行匹配(例如2n +1将匹配该类型的元素,数字1、3 ,5、7等.所有奇数.)
:nth-last-child 匹配兄弟姐妹列表中的元素,从末尾开始倒数. 兄弟姐妹由an + b形式公式匹配(例如2n +1将匹配序列中的最后一个元素,然后匹配该元素之前的两个元素,然后匹配该元素之前的两个元素,依此类推.所有奇数,从末尾开始计数) )
:nth-last-of-type 匹配特定类型的同级元素列表中的元素(例如<p>元素),从末尾开始倒数. 兄弟姐妹由an + b形式公式匹配(例如2n +1将匹配序列中该类型的最后一个元素,然后是该元素的两个元素,然后是该元素的两个元素,依此类推.所有奇数都在计数)从头开始.)
:only-child 匹配没有兄弟姐妹的元素.
:only-of-type 与同级中唯一一个元素类型匹配.
:optional 匹配不需要的表单元素.
:out-of-range 当元素的值超出范围时,将其与范围匹配.
:past 在当前元素之前匹配元素.
:placeholder-shown 匹配显示占位符文本的输入元素.
:playing 匹配表示音频,视频或类似资源的元素,当该元素处于"播放"状态时,该元素能够被"播放"或"暂停".
:paused 当元素"暂停"时,匹配表示音频,视频或类似资源的元素,该元素能够"播放"或"暂停".
:read-only 如果用户不可更改,则匹配该元素.
:read-write 匹配元素(如果用户可以更改).
:required Matches form elements that are required.
:right Paged Media中 ,匹配右侧页面.
:root 匹配作为文档根的元素.
:scope 匹配作为范围元素的任何元素.
:valid 在有效状态下匹配诸如<input>元素之类的元素.
:target 如果元素是当前URL的目标,则与之匹配(即,如果其ID与当前URL片段匹配).
:visited 匹配访问的链接.

Pseudo-elements

Selector Description
::after 匹配出现在原始元素实际内容之后的可样式元素.
::before 匹配出现在原始元素实际内容之前的可样式元素.
::first-letter 匹配元素的第一个字母.
::first-line 匹配包含元素的第一行.
::grammar-error 匹配包含浏览器标记的语法错误的文档部分.
::selection 匹配文档中已选择的部分.
::spelling-error 匹配包含浏览器标记的拼写错误的文档部分.

In this module

  1. Cascade and inheritance
  2. CSS selectors
  3. The box model
  4. Backgrounds and borders
  5. Handling different text directions
  6. Overflowing content
  7. Values and units
  8. Sizing items in CSS
  9. Images, media, and form elements
  10. Styling tables
  11. Debugging CSS
  12. Organizing your CSS