Loading... 1.**伪类** 一种选择器,可以帮我在我的标记文本中减少多余的类 例如当我在写一篇文章时,我要给第一段加粗,此时我可能会写一个类,并把第一个p标签挂上这个类来实现加粗效果,但如果我在这段话之前再加上一段,此时要进行更改便比较困难,此时可以使用:first-child伪类选择器 原本的写法 ```css .first { font-size: 120%; font-weight: bold; } ``` ```html <article> <p class="first">...</p> <p>...</p> </article> ``` 现在的写法 ```css article p:first-child{ font-size: 120%; font-weight: bold; } ``` ```html <article> <p>...</p> <p>...</p> </article> ``` !!! <p style="color:red">这其中还包括用户行为伪类,可用于进行与用户交互</p> !!! 例如 :hover——只会在用户将指针挪到元素上的时候才会激活,一般就是链接元素。 :focus——只会在用户使用键盘控制,选定元素的时候激活。 !!! <style>a:hover{color:hotpink!important;}</style> <p><a href="">Hover over me</a></p> !!! 2.**伪元素** 伪元素以类似方式表现,不过表现得是像你往标记文本中加入全新的HTML元素一样,而不是向现有的元素上应用类。伪元素开头为双冒号:: <div class="tip inlineBlock warning"> **备注**:一些早期的伪元素曾使用单冒号的语法,所以可能会在代码或者示例中看到。现代的浏览器为了保持后向兼容,支持早期的带有单双冒号语法的伪元素。 </div> 例如 ::first-line便可以做到仅改变某段落的第一段的风格 ```css article p::first-line { font-size: 120%; font-weight: bold; } ``` ```html <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 26, 2021 © Allow specification reprint Support Appreciate the author AliPayWeChat Like 如果觉得我的文章对你有用,请随意赞赏