网页学习(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; 
}


网页学习(4)伪类

上一篇:simple js


下一篇:http状态码