伪元素
作用：使用伪元素来表示元素中的一些特殊位置。
:first-letter
表示首字母的位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
p:first-letter{
background-color: greenyellow;
}
</style>
</head>
<body>
<span>我是span标签</span>
<p>我是一个段落</p>
</body>
</html>结果：
为p元素中的首个字母设置了背景颜色。样式不会因为内容的改变而改变。
:first-line
表示首行的位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
p:first-line{
background-color: greenyellow;
}
</style>
</head>
<body>
<span>我是span标签</span>
<p>我是一个段落</p>
</body>
</html>结果：
为p元素中的第一行内容设置背景颜色。
:before
表示元素最前边的部分。
- before指紧跟在开始标签(如<p>)后的位置。
- 一般:before,:after都需要结合content这个样式一起来使用。通过content可以向before或after的位置添加一些内容。
- 注意：content的内容是用css写的，是不能被选中的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
p:before{
content: "我会出现在整个段落的最前边";
color: red;
}
</style>
</head>
<body>
<p>失眠的时候可以数羊。一只羊，两只羊，三只羊，四只羊，五只羊...</p>
</body>
</html>结果：
:after
表示元素的最后边的部分。
- after指在结束标签之前(如</p>)的位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
p:after {
content: "我会出现在整个段落的最后边";
color: orange;
}
</style>
</head>
<body>
<p>失眠的时候可以数羊。一只羊，两只羊，三只羊，四只羊，五只羊...</p>
</body>
</html>结果：
子元素的伪类
:first-child 选中第一个子元素
:last-child 选中最后一个子元素
:nth-child 可以选中任意位置的子元素
- 该选择器后边可以指定一个参数，来指定要选中第几个子元素
- even 表示偶数位置的子元素
- odd 表示奇数位置的子元素
:first-of-type
:last-of-type
:nth-of-type
说明：-of-type 选择指定类型的子元素。它们和-child用法非常类似，只不过child是在所有的子元素中排列，而type是在当前类型的子元素中排列。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。