Skip to main content

伪类和伪元素

伪类选择器​

特点：只有一个冒号 作用：用于向某些选择器添加一些特殊的效果，常见的有：

a:link
a:hover
a:visited
a:active
:fist-child
last-child
nth-child(n)

伪元素选择器​

特点：CSS3 中规定使用两个冒号 作用：表示元素中的一些特殊的位置，常见的有：

first-line
fist-letter
before，after
placeholder
selection：选中文本的样式

伪元素有什么用？​

  • 做效果时用来代替标签以减少无用标签
  • 清除浮动
  • 字体图标
.box::before {
  content: '\e614'; //content内容是反斜杠加图标后4位代码
  font-family: 'iconfont';
}

伪类和伪元素优缺点​

优点： 不占用 DOM 节点，减少 DOM 节点数，让 CSS 帮助解决了一些 JS 的问题，简化开发

缺点： 不利于调试，伪元素只是在视觉效果上添加，但并没有真正的添加到 DOM 树中，这部分并不能被搜索引擎抓取。

参考文章​