常用的css伪元素和伪类

伪元素

css为元素主要用于设置元素指定部分的样式

语法：

p::first-line {
  color: pink;
}

这样我们就可以将  <p> 元素中的首行添加样式：

::first-letter //设置段落第一个字母的颜色

::before ::after伪元素在元素前面和后面分别添加内容

::selection 伪元素匹配用户选择的元素部分

效果

 css伪类

/* 未访问的链接 */
a:link {
  color: #FF0000;
}

/* 已访问的链接 */
a:visited {
  color: #00FF00;
}

/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}

/* 已选择的链接 */
a:active {
  color: #0000FF;
}

p：first-child 伪类，就是匹配第一个p元素

匹配所有 <p> 元素中的首个 <i> 元素

p i:first-child {
  color: blue;
}

匹配所有首个 <p> 元素中的所有 <i> 元素

p:first-child i {
  color: blue;
}