# CSS 结构伪类

# 伪类选择器

作用与优势 :
1. 作用：根据元素在 HTML 中的结构关系查找元素
2. 优势：减少对于 HTML 中类的依赖，有利于保持代码整洁
3. 场景：常用于查找某父级选择器中的子元素

选择器

选择器	说明
E:first-child{}	匹配父元素中第一个子元素，并且是 E 元素
E:last-child{}	匹配父元素中最后一个子元素，并且是 E 元素
E:nth-child(n){}	匹配父元素中第 n 个元素，并且是 E 元素
E:nth-last-child(n){}	匹配父元素中倒数第 n 个子元素，并且是 E 元素

n 的注意点 :
1. n 为 : 0, 1, 2, 3, 4, 5, 6…
2. 通过哦 n 可以组成常见公式
  功能公式
  偶数 2n, even
  奇数 2n+1, 2n-1, odd
  找到前五个 -n+5
  找到从第五个往后 n+5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构伪类选择器</title>
    <style>
        /*第一个背景色变为粉色*/
        li:first-child {
            background-color: pink;
        }

        /*最后一个背景色变为蓝色*/
        li:last-child {
            background-color: blue;
        }

        /*第四个背景色变为橙色*/
        li:nth-child(4) {
            background-color: orange;
        }

        /*倒数第二个背景色变为红色*/
        li:nth-last-child(2) {
            background-color: red;
        }

        /*所有偶数背景色变为黄色*/
        li:nth-child(2n) {
            background-color: yellow;
        }

        li:nth-child(even) {
            background-color: yellow;
        }

        /*所有奇数背景色变为紫色*/
        li:nth-child(2n-1) {
            background-color: purple;
        }

        li:nth-child(odd) {
            background-color: purple;
        }

        /*前两个变为绿色*/
        li:nth-child(-n+2) {
            background-color: green;
        }

        /*从第二个开始 往后都变为深蓝色*/
        li:nth-child(n+2) {
            background-color: darkblue;
        }
    </style>
</head>
<body>
    <ul>
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
        <li>这是第4个li</li>
        <li>这是第5个li</li>
        <li>这是第6个li</li>
        <li>这是第7个li</li>
        <li>这是第8个li</li>
    </ul>
</body>
</html>

# 伪元素

目标：能够使用伪元素在网页中创建内容

伪元素：一般页面中的非主体内容可以使用伪元素
区别 :
1. 元素 : HTML 设置的标签
2. 伪元素：由 CSS 模拟出的标签效果
种类 :
伪元素作用
::before 在父元素内容的最前面添加一个伪元素
::after 在父元素内容的最后添加一个伪元素
注意点 :
1. 必须设置 content 属性才能生效
2. 伪元素默认是行内元素

CSS 伪类选择器