网页学习（4）伪类

根据https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements学习

网页末端有许多参考值

什么是伪类？

伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。它们表现得会像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护。

伪类就是开头为冒号的关键字：

:pseudo-class-name

用户行为伪类

一些伪类只会在用户以某种方式和文档交互的时候应用。这些用户行为伪类，有时叫做动态伪类，表现得就像是一个类在用户和元素交互的时候加到了元素上一样。案例包括：

• :hover——上面提到过，只会在用户将指针挪到元素上的时候才会激活，一般就是链接元素。
• :focus——只会在用户使用键盘控制，选定元素的时候激活。

伪元素是啥？

伪元素以类似方式表现，不过表现得是像你往标记文本中加入全新的HTML元素一样，而不是向现有的元素上应用类。伪元素开头为双冒号::。

::pseudo-element-name

把伪类和伪元素组合起来

如果你想让第一段的第一行加粗，你需要把:first-child和::first-line选择器放到一起。试着编辑前面的实时示例，让它使用下面的CSS。这里的意思是，我们想选择一个<article>元素里面的第一个<p>元素的第一行。

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