2022年10月

:nth-child(an+b) 这个 CSS 伪类首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从 1 开始排序，选择的结果为 CSS 伪类:nth-child 括号中表达式（an+b）匹配到的元素集合（n=0，1，2，3…）。示例：

0n+3 或简单的 3 匹配第三个元素。
1n+0 或简单的 n 匹配每个元素。（兼容性提醒：在 Android 浏览器 4.3 以下的版本 n 和 1n 的匹配方式>不一致。1n 和 1n+0 是一致的，可根据喜好任选其一来使用。）
2n+0 或简单的 2n 匹配位置为 2、4、6、8…的元素（n=0 时，2n+0=0，第 0 个元素不存在，因为是从 1 >开始排序)。你可以使用关键字 even 来替换此表达式。
2n+1 匹配位置为 1、3、5、7…的元素。你可以使用关键字 odd 来替换此表达式。
3n+4 匹配位置为 4、7、10、13…的元素。
a 和 b 都必须为整数，并且元素的第一个子元素的下标为 1。换言之就是，该伪类匹配所有下标在集合 { >an + b; n = 0, 1, 2, …} 中的子元素。另外需要特别注意的是，an 必须写在 b 的前面，不能写成 b+an 的形>式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            display: flex;

            height: 100px;
            background-color: aliceblue;
        }
        .box .box-item {
            margin: 8px;
            background-color: antiquewhite;
        }
        .box .box-item:nth-child(1) {
            flex: 1;
            background-color: blue;
        }
        .box .box-item:nth-child(2) {
            flex: 2;
            background-color: rgb(110, 219, 67);
        }
        .box .box-item:nth-child(3) {
            flex: 3;
            background-color: rgb(255, 115, 0);
        }
        .box1 {

        }
        .box1 .box1-item {
            margin-top: 8px;
            height: 30px;
            width: 300px;
            background-color: antiquewhite;
        }
        .box1 .box1-item:nth-child(2n+2) {
            background-color: aqua;
        }
        .box1 .box1-item:nth-child(2n+1) {
            background-color: rgb(21, 255, 0);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box-item">

        </div>
        <div class="box-item">

        </div>
        <div class="box-item">

        </div>
    </div>

    <div class="box1">
        <div class="box1-item"></div>
        <div class="box1-item"></div>
        <div class="box1-item"></div>
        <div class="box1-item"></div>
        <div class="box1-item"></div> 
        <div class="box1-item"></div>
        <div class="box1-item"></div>
        <div class="box1-item"></div>
        <div class="box1-item"></div>
        <div class="box1-item"></div>
    </div>
</body>
</html>

image-1666982061714

要在nginx上配置反向代理WebSocket，需要使用proxy_pass指令，并配置WebSocket的特殊头。以下是一个示例配置：


server {
    listen 80;
    server_name example.com;

    location /ws {
        proxy_pass http://backend;
        proxy_http_version 1.1;
        proxy_set_header X-Real-IP $remote_addr;  # 获取客户端IP
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
    }
}

upstream backend {
    server 127.0.0.1:3000;
}

在这个配置中，nginx将收到的所有WebSocket连接请求代理到http://backend，它在此处定义为127.0.0.1:3000。 proxy_http_version指令设置为1.1，以确保nginx可以正确处理WebSocket。proxy_set_header指令用于配置WebSocket的特殊头，这些头包括Upgrade，Connection和Host。

请注意，这只是一个基本的配置示例，实际配置可能会因情况而异。确保你的nginx版本支持WebSocket，并在进行更改之前备份您的现有配置文件。