一、伪类选择器
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>
