CSS伪类与伪元素：hover、active、before、after

本文主要讲解CSS中常用的伪类和伪元素的用法，包括hover、active、before、after等细节用法，并附有相应的代码案例。


CSS伪类


CSS中的伪类指的是在某些特定的状态下，选择器所匹配的元素的样式，常用的伪类有：


:hover


:hover伪类用于鼠标悬停在元素上时改变元素的样式，常用于链接、按钮等元素：


1
2
3
a:hover {
  color: red;
}

:active


:active伪类用于鼠标按下时改变元素的样式，常用于按钮等元素：


1
2
3
button:active {
  background-color: yellow;
}

CSS伪元素


CSS中的伪元素指的是在某些特定的位置上，选择器所匹配的元素的样式，常用的伪元素有：


::before


::before伪元素可以在元素的内容前面插入一个内容，常用于一些特殊的装饰效果：


1
2
3
4
h3::before {
  content: "#";
  margin-right: 5px;
}

::after


::after伪元素可以在元素的内容后面插入一个内容，常用于一些特殊的装饰效果：


1
2
3
p::after {
  content: " - The End";
}

以上就是CSS中常用的伪类和伪元素的用法，希望对大家有所帮助。

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com

猿教程
请先登录后发表评论
  • 最新评论
  • 总共0条评论