本文已参与「新人创作礼」活动，一起开启掘金创作之路
一、伪类选择器
1.根据所有子元素排序的伪类
1、 :first-child 第一个子元素
2、 :last-child 最后一个子元素
3、 :nth-child() 选中第n个子元素 （）可填写n选中所有子元素，也可以选择是第几行，填多少行，特殊填写 2n（even）偶数、2n+1（odd）奇数。
例如：
<body>
<h1>《静夜思》</h1>
<h3>唐·李白</h2>
<ul>
<li>床前明月光，</li>
<li>疑是地上霜。</li>
<li>举头望明月</li>
<li>低头思故乡。</li>
</ul>
</body>
1.将ul里面的第一句诗句变成红色
<style>
li:first-child{
color: red;
}
</style>
2.将ul里面的最后一句诗变成绿色
<style>
li:last-child{
color: green;
}
</style>
3.将ul里面的第三句诗句变成橘色
<style>
li:nth-child(3){
color: orange;
}
</style>
效果展示：
编辑
2.在同类型的子元素中选择
1、:first-of-type 第一个子元素
2、:last-of-type 最后一个子元素
3、:nth-of-type() 选中第n个子元素
使用方法与上面类似，注意是在同类型下
例如：
<body>
<h1>《静夜思》</h1>
<ul>
<p>唐·李白</p>
<li>床前明月光，</li>
<li>疑是地上霜。</li>
<li>举头望明月</li>
<li>低头思故乡。</li>
</ul>
将ul中古诗第一句变成红色
<style>
li:first-of-type{
color: red;
}
</style>
效果展示：
![]( "点击并拖拽以移动")
编辑
其他两种方法与其类似，如果最后一句古诗后面跟着其他的子元素，就用:last-of-type，:nth-of-type() 也是一样。
3 :not() 否定伪类
将符合条件的元素从选择去除
例如：如果要求处理古诗第一句，其他都是红色
<body>
<h1>《静夜思》</h1>
<ul>
<p>唐·李白</p>
<li class="a">床前明月光，</li>
<li>疑是地上霜。</li>
<li>举头望明月</li>
<li>低头思故乡。</li>
</ul>
</body>
<style>
ul>li:not(.a){
color: red;
}
</style>
效果展示：
![]( "点击并拖拽以移动")
编辑
二、伪元素选择器
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 选中的内容
::before 元素的开始位置
::after 元素的结束位置
用法与伪类选择器用法一致，需要注意的是，::befor和::after都是要content一起使用的。
<style>
p::before{
content: '关注';
color: red;
}
</style>
<body>
<p>胜二薪绪月德太圣变蒲，量俭京始的是杨二，劝生变十仄，应侯上。</p>
</body>
</html>
编辑
\
