常用CSS属性说明

一、完整全套 :nth 系列选择器

包含：child / last-child / of-type / last-of-type / first / last / only 全部伪类选择器，附带区分对比表、语法、实例、坑点

选择器	匹配规则
:nth-child(n)	同级所有标签，第 n 个子元素（从1计数）
:nth-last-child(n)	同级所有标签，倒数第 n 个子元素
:nth-of-type(n)	同级同标签，第 n 个该类型元素
:nth-last-of-type(n)	同级同标签，倒数第 n 个该类型元素
:nth-child(2n)	选取偶数标签，2n 也可以是 even
:nth-child(2n-1)	选取奇数标签，2n-1 可以是 odd
:nth-child(3n+1)	自定义选取标签，3n+1 表示（隔二取一）
:nth-child(n+4)	选取大于等于 4 标签，n 表示从整数
:nth-child(-n+4)	选取小于等于 4 标签
:first-child	父容器第一个子元素（任意标签）
:last-child	父容器最后一个子元素（任意标签）
:first-of-type	同级同标签第一个
:last-of-type	同级同标签最后一个
:only-child	父容器仅有唯一 1 个子元素
:only-of-type	同级仅有唯一一个该标签元素
:not(选择器)	排除匹配的元素，常搭配 nth 使用

/* ========== 1. :nth-child 系列 ========== */
li:nth-child(2) { background: #2563eb; }
div:nth-child(odd) { color: #fff; }  /* 奇数 1,3,5... */
div:nth-child(even) { color: #333; } /* 偶数 2,4,6... */
.box:nth-last-child(1) { border-bottom: none; } /* 倒数第一个 */

/* ========== 2. :nth-of-type / last-of-type 系列 ========== */
p:nth-of-type(3) { font-weight: bold; }
h3:nth-last-of-type(2) { margin-bottom: 30px; }
span:last-of-type { margin-right: 0; } /* 补充缺失 last-of-type */

/* ========== 3. first / last 简化写法 ========== */
.item:first-child { margin-top: 0; }
.item:last-child { margin-bottom: 0; }
p:first-of-type { margin-top: 10px; }
p:last-of-type { margin-bottom: 10px; }

/* ========== 4. only 唯一元素 ========== */
.card:only-child { width: 100%; }
img:only-of-type { display: block; }

/* ========== 5. 组合:not 排除 ========== */
.list li:not(:last-child) { border-bottom: 1px solid #eee; }

易错区分： 1. child 会识别所有混杂标签，of-type 只筛选同一种标签； 2. last-of-type 只匹配同类型最后一个，父容器其他标签不参与计数； 3. 计数从数字1开始，没有第0个元素。

二、::before / ::after 伪元素完整规范

/* 通用标准模板，content 必须存在，空字符串生成空白块 */
.decor::before {
    content: ""; /* 必填，无内容也要写空双引号 */
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #2563eb;
    margin-right: 10px;
}

/* 插入文字内容 */
.text-tag::after {
    content: " 备注标记";
    color: #666;
    font-size: 12px;
}

/* 清除浮动经典写法 */
.clearfix::after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
}

/* 下拉三角箭头示例 */
.arrow::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 0);
    border: 6px solid transparent;
    border-top-color: #333;
}

限制：伪元素属于行内虚拟元素，无法绑定JS点击事件，不能给 input/ img 等自闭合标签使用。

三、@font-face 自定义字体完整标准写法

/* 全局注册自定义字体，多格式兼容 */
@font-face {
    font-family: "CustomTitleFont"; /* 自定义字体名称，全局调用 */
    /* 优先级 woff2 > woff > ttf > eot */
    src: url("./font/text.woff2") format("woff2"),
         url("./font/text.woff") format("woff"),
         url("./font/text.ttf") format("truetype");
    font-weight: 500; /* 字重：100~900 */
    font-style: normal; /* normal / italic 斜体 */
    font-display: swap; /* 加载前临时显示系统字体，优化白屏 */
}

/* 使用自定义字体 */
h1 {
    font-family: "CustomTitleFont", "Microsoft YaHei", sans-serif;
}

四、backdrop-filter 全部滤镜函数与兼容写法

.glass {
    /* 半透明背景是毛玻璃生效前提 */
    background: rgba(255,255,255,0.18);
    /* webkit 兼容前缀适配Safari */
    -webkit-backdrop-filter: blur(12px) brightness(1.1) saturate(120%);
    backdrop-filter: blur(12px) brightness(1.1) saturate(120%);
    border: 1px solid rgba(255,255,255,0.25);
}

/* 全部可用滤镜函数 */
blur(px)         高斯模糊，像素越大越糊
brightness(num)  亮度 0~2
contrast(num)    对比度
grayscale(%)     灰度 0%~100%
saturate(%)      饱和度
hue-rotate(deg)  色相旋转 0~360deg
invert(%)        颜色反相
opacity(%)       底层透明度
sepia(%)         褐色复古滤镜

生效条件：父容器不能设置 overflow:hidden；当前元素背景必须半透明才能看到底层滤镜。

五、transform 全部变换函数完整用法

2D/3D 旋转、缩放、倾斜、矩阵，多变换叠加、transform-origin 变换原点全部参数

/* transform 语法：多个变换空格分隔，顺序影响最终效果 */
.box {
    transform: rotate(8deg) scale(1.05) skew(2deg, 0deg) translate(10px, 0);
    /* 变换原点：x y，百分比/像素/关键字 */
    transform-origin: center center;
    transform-style: preserve-3d; /* 开启3D空间 */
    perspective: 800px; /* 3D透视距离 */
}

/* 2D变换函数 */
rotate(deg)       旋转，正数顺时针
scale(x,y)       缩放，单值宽高同步
skew(xDeg,yDeg)  水平/垂直倾斜
translate(x,y)   平面位移
matrix()         矩阵复合变换

/* 3D变换函数 */
rotateX() / rotateY() / rotateZ()
translateZ()     Z轴前后位移
scaleZ()
matrix3d()

性能：transform 使用GPU渲染，不触发页面重排reflow，优于 top/left/margin 定位动画。

六、translate X/Y/Z 三轴偏移 + 万能居中方案

/* 基础三轴位移 */
.move {
    transform: translate(20px, -15px); /* X 水平 Y 垂直 */
    transform: translateX(30%);    /* 仅水平，百分比参照自身宽度 */
    transform: translateY(-50%);   /* 仅垂直 */
    transform: translateZ(20px);    /* 3D纵深，需开启perspective */
}

/* 绝对定位完美居中（行业标准方案） */
.parent { position: relative; }
.child-center {
    position: absolute;
    top: 50%;
    left: 50%;
    /* -50% 取自身宽高一半，抵消top/left偏移 */
    transform: translate(-50%, -50%);
}

关键区别：translate(百分比)基准是**元素自身尺寸**；top/left 百分比基准是父容器宽高。

七、transition 过渡动画完整简写/拆分参数

/* 简写完整格式：变化属性 时长 缓动函数 延迟 */
transition: all 0.5s ease 0s;

/* 拆分写法，精准控制单个属性过渡 */
.btn {
    transition-property: transform, background-color, opacity;
    transition-duration: 0.5s;
    transition-timing-function: ease;
    transition-delay: 0s;
}

/* 常用缓动函数 */
ease        默认：慢→快→慢
linear      匀速
ease-in     先慢后快
ease-out    先快后慢
ease-in-out 两头慢中间快
cubic-bezier() 自定义贝塞尔曲线

适用场景：hover、active、focus 简单状态切换；循环、多段复杂动画使用 @keyframes。

八、@keyframes 关键帧动画全部配置项

/* 1. 定义关键帧动画 */
@keyframes floatAnim {
    0% { transform: translate(0,0) rotate(0deg); opacity: 0.6; }
    50% { transform: translate(40px, -20px) rotate(180deg); opacity: 1; }
    100% { transform: translate(0,0) rotate(360deg); opacity: 0.6; }
}

/* 2. 元素绑定动画 简写 */
.ball {
    animation: floatAnim 4s ease-in-out 0s infinite alternate both;
}

/* 拆分全部动画属性 */
animation-name: floatAnim;        动画名称
animation-duration: 4s;             单次时长
animation-timing-function: ease-in-out; 缓动曲线
animation-delay: 0s;               延迟启动时间
animation-iteration-count: infinite;  循环次数 infinite无限
animation-direction: alternate;     alternate往返 / normal正向 / reverse反向
animation-fill-mode: both;           动画前后保留样式
animation-play-state: running;       paused暂停 / running播放

九、整合全部知识点完整示例（所有属性彩色注释）

代码包含：全套nth选择器(last-of-type)、transform/translate、伪类、backdrop-filter、字体、transition、keyframes，每行注释对应上方知识点

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS全属性综合演示</title>
    <style>
        /* 三、@font-face 自定义字体引入 */
        @font-face {
            font-family: "DemoFont";
            src: url("") format("truetype");
            font-weight: normal;
            font-style: normal;
            font-display: swap;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: "DemoFont", "Microsoft YaHei", sans-serif;
            background: #101428;
            padding: 40px;
        }

        /* 一、全套nth选择器 包含last-of-type */
        .list li { list-style: none; margin: 10px 0; }
        .item {
            width: 340px;
            padding: 16px;
            border-radius: 12px;
            position: relative;
            /* 七、transition 过渡 all 0.5s ease */
            transition: all 0.5s ease;
        }
        .list li :nth-child(odd) .item { background: rgba(37,99,235,0.16); }
        .list li :nth-child(even) .item { background: rgba(244,63,94,0.16); }
        .list li :nth-child(3) .item { border: 1px solid #fff; }
        .list span :last-of-type { margin-right: 0; } /* 补充缺失last-of-type */

        /* 二、::before / ::after 伪元素 */
        .item::before {
            content: "";
            position: absolute;
            left: 14px;
            top: 50%;
            /* 六、translate Y轴居中 */
            transform: translateY(-50%);
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #fff;
        }
        .item::after {
            content: " · 伪类标记";
            position: absolute;
            right: 14px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 12px;
            color: #ccc;
        }

        /* 五、transform 多变换叠加 */
        .item:hover {
            transform: translateX(14px) scale(1.04) rotate(1deg);
            background: rgba(255,255,255,0.2);
        }

        /* 四、backdrop-filter 毛玻璃卡片 */
        .glass-card {
            width: 380px;
            height: 240px;
            margin: 45px 0;
            padding: 28px;
            border-radius: 20px;
            background: rgba(255,255,255,0.11);
            -webkit-backdrop-filter: blur(16px);
            backdrop-filter: blur(16px);
            border: 1px solid rgba(255,255,255,0.22);
            position: relative;
        }

        /* 六、translate(-50%,-50%) 绝对居中 */
        .center-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #fff;
            font-size: 18px;
        }

        /* 八、@keyframes 循环动画 */
        @keyframes floatBall {
            0% { transform: translate(0,0) scale(1); opacity: 0.6; }
            50% { transform: translate(35px, -18px) scale(1.12); opacity: 1; }
            100% { transform: translate(0,0) scale(1); opacity: 0.6; }
        }
        .animate-ball {
            width: 90px;
            height: 90px;
            border-radius: 50%;
            background: linear-gradient(45deg,#38bdf8,#a855f7);
            animation: floatBall 4.2s ease-in-out 0s infinite alternate;
        }
    </style>
</head>
<body>
    <ul class="list">
        <li><div class="item">列表1 奇数nth-child(odd) <span>标记1</span><span>标记2</span></div></li>
        <li><div class="item">列表2 偶数nth-child(even)</div></li>
        <li><div class="item">列表3 nth-child(3)特殊样式</div></li>
        <li><div class="item">列表4 偶数</div></li>
    </ul>

    <div class="glass-card">
        <div class="center-text">translate(-50%,-50%)居中演示</div>
    </div>

    <div class="animate-ball"></div>
</body>
</html>

本Demo覆盖全部需求知识点清单

完整nth家族：包含:last-of-type、nth-child、nth-of-type、奇偶选择器
transform 旋转/缩放/多变换叠加 + transform-origin基础逻辑
translate X/Y 偏移、translate(-50%,-50%)万能居中
::before / ::after 伪元素装饰标记完整用法
backdrop-filter blur 磨砂玻璃半透明卡片
@font-face 自定义字体全局引入规范
transition: all 0.5s ease 标准过渡动画
@keyframes + animation 无限往返循环浮动动画

CSS 常用属性速查手册