1.伪类
一种选择器,可以帮我在我的标记文本中减少多余的类

例如当我在写一篇文章时,我要给第一段加粗,此时我可能会写一个类,并把第一个p标签挂上这个类来实现加粗效果,但如果我在这段话之前再加上一段,此时要进行更改便比较困难,此时可以使用:first-child伪类选择器

原本的写法

.first {
   font-size: 120%;
   font-weight: bold;
}   
<article>
   <p class="first">...</p>
   <p>...</p>
</article>

现在的写法

article p:first-child{
   font-size: 120%;
   font-weight: bold;
}  
<article>
   <p>...</p>
   <p>...</p>
</article>

这其中还包括用户行为伪类,可用于进行与用户交互

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

Hover over me

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

备注:一些早期的伪元素曾使用单冒号的语法,所以可能会在代码或者示例中看到。现代的浏览器为了保持后向兼容,支持早期的带有单双冒号语法的伪元素。

例如
::first-line便可以做到仅改变某段落的第一段的风格

article p::first-line {
    font-size: 120%;
    font-weight: bold;
}
<article>
    <p>...</p>
</article>

如果结合两种用法,则可以仅改变第一段第一行的内容样式,即article p:first-child::first-line

参考文章:https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements

Last modification:July 26th, 2021 at 10:46 am
如果觉得我的文章对你有用,请随意赞赏