为什么引入CSS Modules

最新推荐文章于 2024-03-18 22:36:50 发布
最新推荐文章于 2024-03-18 22:36:50 发布
阅读量139 收藏
点赞数

全局样式冲突

过程是这样的：你现在有两个模块，分别为A、B,你可能会单独针对这两个模块编写自己的样式，例如a.css、b.css，看一下代码

// A.js
import './a.css'
const html = '<h1 class="text">module A</h1>'

// B.js
import './b.css'
const html = '<h1 class="text">module B</h1>'

下面是样式：

/* a.css */
.text {
    color: red;
}

/* b.css */
.text {
    color: blue;
}

导入到入口APP中

// App.js
import A from './A.js'
import B from './B.js'

element.innerTHML = 'xxx'

由于样式是统一加载到入口中，因此实际上的样式合在一起（这里暂定为mix.css）显示顺序为：

/* mix.css */

/* a.css */
.text {
    color: red;
}

/* b.css */
.text {
    color: blue;
}

根据CSS的Layout规则，因此后面的样式会覆盖掉前面的样式声明，最终有效的就是text的颜色为blue的那条规则，这就是全局样式覆盖，同理，这在js中也同样存在，因此就引入了模块化，在js中可以用立即执行函数表达式来隔离出不同的模块

var moduleA = (function(document, undefined){
    // your module code
})(document)

var moduleB = (function(document, undefined){
    // your module code
})(document)

而在css中要想引入模块化，那么就只能通过namespace来实现，而这个又会带来新的问题，这个下面会讲到

嵌套层次过深的选择器

为了解决全局样式的冲突问题，就不得不引入一些特地命名namespace来区分scope，但是往往有些namespace命名得不够清晰，就会造成要想下一个样式不会覆盖，就要再加一个新的namespace来进行区分，最终可能一个元素最终的显示样式类似如以下：

.widget .table .row .cell .content .header .title {
  padding: 10px 20px;
  font-weight: bold;
  font-size: 2rem;
}

在上一个元素的显示上使用了7个选择器，总结起来会有以下问题：

  • 根据CSS选择器的解析规则可以知道，层级越深，比较的次数也就越多。当然在更多的情况下，可能嵌套的层次还会更深，另外，这里单单用了类选择器，而采用类选择器的时候，可能对整个网页的渲染影响更重。
  • 增加了不必要的字节开销
  • 语义混乱，当文档中出现过多的content、title以及item这些通用的类名时，你可能要花上老半天才知道它们到底是用在哪个元素上
  • 可扩展性不好，约束越多，扩展性越差

【注】CSS的渲染规则可以参看这篇文章探究 CSS 解析原理

会带来代码的冗余

由于CSS不能使用类似于js的模块化的功能，可能你在一个css文件中写了一个公共的样式类，而你在另外一个css也需要这样一个样式，这时候，你可能会多写一次，类似于这样的

/* a.css */

.modal {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.7);
}
.text {
    color: red;
}

/* b.css */
.modal {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.7);
}
.text {
    color: blue;
}

那么在合并成app.css的时候，就会被编写两遍，虽然样式不会被影响，但是这样实际上也是一种字节浪费，当然，上述的这种情况完全是可以通过公用全局样式来达到目的，但是，这种代码重复通常是在不知情的情况下发生的。

一些解决方案

针对上述的一些问题，也有一些解决方案，具体如下：

CSS预处理器(Sass/Less等)

Sass,Less的用法这里不再赘述，如果不清楚，可以自己查阅相关资料去了解一下。

CSS预处理器最大的好处就是可以支持模块引入，用js的方式来编写CSS，解决了部分scope混乱以及代码冗余的问题，但是也不能完全避免。同时，也没有解决全局样式的冲突问题

一个SASS的的文件是这样的：

/* app.sass */

@import './reset'
@import './color'
@import './font'

可以实际上编译之后，终究还是一个文件，因此不可避免的会出现冲突样式

BEM（Block Element Modifier）

There are only two hard problems in Computer Science: cache invalidation and naming things — Phil Karlton

BEM就是为了解决命名冲突以及更好的语义化而生的。

BEM名词解释

  • Block：逻辑和页面功能都独立的页面组件，是一个可复用单元，特点如下：

    • 可以随意嵌套组合
    • 可以放在任意页面的任何位置，不影响功能和外观
    • 可复用，界面可以有任意多个相同Block的实例
  • Element：Block的组成部分，依赖Block存在（出了Block就不能用）

  • [可选]定义Block和Element的外观及行为，就像HTML属性一样，能让同一种Block看起来不一样

命名规则

Block作为最小的可复用单元，任意嵌套不会影响功能和外观，命名可以为header、menu等等

<style>
    .header { color: #042; }
</style>

<div class="header">...</div>

Element依附Block存在，没有单独的含义，命名上语义尽量接近于Block，比如title、item之类

<style>
    .header { color: #042; }
    .header__title { color: #042; }
</style>

<div class="header">
    <h1 class="header__title">Header</h1>
</div>

Modifier是一个元素的状态显示，例如active、current、selected

<style>
    .header--color-black { color: #000; }
    .header__title--color-red { color: #f00; }
</style>

<div class="header header--color-black">
    <h1 class="header__title">
        <span class="header__title--color-red">Header</span>
    </h1>
</div>

【说明】

  • Block完全独立，可以嵌套，一个header是一个Block，header下的搜索框也可以是一个Block
  • 不可能出现Block__Element-father__Element-son_Modifer这种类名的写法，BEM只有三级
  • Modifier可以加在Block和Element上面
  • Modifier作为一个额外的类名加载Block和Element上面，只是为了改变状态，需要保留原本的class

一个完整的示例

<form class="form form--theme-xmas form--simple">
  <input class="form__input" type="text" />
  <input
    class="form__submit form__submit--disabled"
    type="submit" />
</form>
.form { }
.form--theme-xmas { }
.form--simple { }
.form__input { }
.form__submit { }
.form__submit--disabled { }

参考链接：

BEM解决了模块复用、全局命名冲突等问题，配合预处理CSS使用时，也能得到一定程度的扩展，但是它依然有它的问题：

  • 对于嵌套过深的层次在命名上会给需要语义化体现的元素造成很大的困难
  • 对于多人协作上，需要统一命名规范，这同样也会造成额外的effort

CSS Modules

说了这么多，终于要到正文了

什么是CSS Modules

根据CSS Modules的repo上的话来说是这样的：

CSS files in which all class names and animation names are scoped locally by default.

所以CSS Modules并不是一个正式的声明或者是浏览器的一个实现，而是通过构建工具（webpack or Browserify）来使所有的class达到scope的一个过程。

CSS Modules 解决了什么问题

  • 全局命名冲突，因为CSS Modules只关心组件本身，只要保证组件本身命名不冲突，就不会有这样的问题，一个组件被编译之后的类名可能是这样的：
/* App.css */
.text {
    color: red;
}

/* 编译之后可能是这样的 */
.App__text___3lRY_ {
    color: red;
}

命名唯一，因此保证了全局不会冲突。

  • 模块化

可以使用composes来引入自身模块中的样式以及另一个模块的样式：

.serif-font {
  font-family: Georgia, serif;
}

.display {
  composes: serif-font;
  font-size: 30px;
  line-height: 35px;
}

应用到元素上可以这样使用：

import type from "./type.css";

element.innerHTML = 
  `<h1 class="${type.display}">
    This is a heading
  </h1>`;

之后编译出来的模板可能是这样的：

<h1 class="Type__display__0980340 Type__serif__404840">
  Heading title
</h1>

从另一个模块中引入，可以这样写：

.element {
  composes: dark-red from "./colors.css";
  font-size: 30px;
  line-height: 1.2;
}
  • 解决嵌套层次过深的问题

因为CSS Modules只关注与组件本身，组件本身基本都可以使用扁平的类名来写，类似于这样的：

.root {
  composes: box from "shared/styles/layout.css";
  border-style: dotted;
  border-color: green;
}

.text {
  composes: heading from "shared/styles/typography.css";
  font-weight: 200;
  color: green;
}

CSS Modules 怎么用

CSS Modules不局限于你使用哪个前端库，无论是React、Vue还是Angular，只要你能使用构建工具进行编译打包就可以使用。

下面我使用webpack为例，一步一步引入CSS Modules.

构建最初始的应用

.
├── build
│   └── bundle.js
├── index.html
├── node_modules
├── package-lock.json
├── package.json
├── src
│   ├── index.js
│   └── styles
└── webpack.config.js

index.js作为程序入口，styles文件夹存放样式文件，配合webpack.config.js作为webpack配置文件。

// index.js
var html = `<div class="header">
    <h2 class="title">CSS Modules</h2>
</div>`

document.getElementById('container').innerHTML = html;

样式文件：

/* global.css */
* {
    margin: 0;
    padding: 0;
}

.container {
    padding: 20px;
}

/* index.css */
.header {
    font-size: 32px;
}

.title {
    border-bottom: 1px solid #ccc;
    padding-bottom: 20px;
}

模板文件：

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css modules</title>
</head>
<body>
    <div id="container" class="container"></div>
    <script src="./build/bundle.js"></script>
</body>
</html>

全局安装依赖，配置执行脚本：

npm install webpack webpack-cli --save-dev

package.json

"scripts": {
    "build": "npx webpack && open index.html"
}

在控制台执行npm run build， 得到的结果为：

> css-modules-demo@1.0.0 build /Users/yhhu/Documents/coding/css-modules-demo
> npx webpack && open index.html

Hash: 5810d2ecd760c08cc078
Version: webpack 4.17.1
Time: 78ms
Built at: 2018-08-26 15:09:31
    Asset      Size  Chunks             Chunk Names
bundle.js  3.97 KiB    main  [emitted]  main
Entrypoint main = bundle.js
[./src/index.js] 196 bytes {main} [built]

加入样式以及loaders

package.json中加入能够处理css的loader

  module: {
    rules: [
      {
        test: /\.js/,
        loader: 'babel-loader',
        include: __dirname + '/src',
        exclude: __dirname + '/src/styles'
        },
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {         
            }
          }
        ]
      }
    ]
  }

index.js中引入两个CSS文件

// index.js
import './styles/global.css'
import './styles/index.css'

const html = `<div class="header">
    <h2 class="title">CSS Modules</h2>
</div>`

document.getElementById('container').innerHTML = html;

编译之后的执行结果为：
build

在浏览器中显示为：
css-loader

提取公有样式

可以看到打包之后的build目录下只有一个bundle.js，我们现在要把样式文件提取出来

./build/
└── bundle.js
  • 安装依赖
npm install --save-dev mini-css-extract-plugin
  • 修改webpack.config.js
var MiniCssExtractPlugin = require("mini-css-extract-plugin");

modules: {
    rules: [
        // {
        //   test: /\.css$/,
        //   use: [
        //      { loader: "style-loader" },
        //     {
        //      loader: "css-loader",
        //      options: {
        
        //      }
        //     }
        //   ]
        // },
        {
            test: /\.css$/,
            use: [
              {
                loader: MiniCssExtractPlugin.loader,
                options: {
                  publicPath: './build/styles'
                }
              },
              { 
                loader: "css-loader",
                options: {
                    
                }
              }
            ]
        }        
    ]
},
plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
],
  • 在模板中引入样式文件
<!-- index.html -->

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="./build/main.css">
</head>
<body>
    <div id="container" class="container"></div>
    <script src="./build/bundle.js"></script>
</body>
  • 编译打包
    extract

可以看到有main.css生成

开启css modules功能

默认在css-loader中是不开启css modules功能的，要开启可以设置modules: true即可，更多可以参看官方css-loader使用方法修改webpack.config.js，如下：

{
    test: /\.css$/,
    use: [
      {
        loader: MiniCssExtractPlugin.loader,
        options: {
          publicPath: './build/styles'
        }
      },
      { 
        loader: "css-loader",
        options: {
            modules: true
        }
      }
    ]
}

修改index.js文件中的引用方式：

import './styles/global.css'
import Index from './styles/index.css'

const html = `<div class=${Index.header}>
    <h2 class=${Index.title}>CSS Modules</h2>
</div>`

document.getElementById('container').innerHTML = html;

可以看到，之前都是直接import一个css文件，而现在改成了导出一个对象的形式，我们可以把Index对象打印出来，看看具体是些什么东西：

object

直接对应我们引用的方式，然后我们再看看生成出来的main.css中具体有哪些东西：

* {
    margin: 0;
    padding: 0;
}

._2BQ9qrIFipNbLIGEytIz5Q {
    padding: 20px;
}
._3Ukt9LHwDhphmidalfey-S {
    font-size: 32px;
}

._3XpLkKvmw0hNfJyl8yU3i4 {
    border-bottom: 1px solid #ccc;
    padding-bottom: 20px;
}

合成一个文件之后，所有的类名都经过了哈希转换，因此确保了类名的唯一性，我们再看看浏览器中inspector中的样式应用，如下：

no-transform

事实上，container样式我们是不需要转换的，因为我是把它固定写死在了容器上，那我们应该怎么做呢？

全局作用域

要想一个类名不需要被装换，那么可以使用:global(className)来进行包装，这样的类不会被转换，会被原样输出，下面我们修改global.css

/* global.css */
* {
    margin: 0;
    padding: 0;
}

:global(.container) {
    padding: 20px;
}

我们再来看看main.css

global

就可以发现.container类没有被转换

定义哈希类名

CSS Modules默认是以[hash:base64]来进行类名转换的，可辨识度不高，因此我们需要自定义

开启自定义，可以使用一个配置参数localIdentName，具体配置如下：

{ 
  loader: "css-loader",
  options: {
    modules: true,
    localIdentName: '[path][name]__[local]--[hash:base64:5]'
  }
}

localIdentName

类名组合

如果我们实现类似于Sass的继承功能，我们需要怎么做呢？CSS Modules中提供了composes关键字让我们来继承另外一个类，修改index.css如下：

.red {
    color: red;
}

.header {
    font-size: 32px;
}

.title {
    composes: red;
    border-bottom: 1px solid #ccc;
    padding-bottom: 20px;
}

我们增加了一个red的类名，在title中实现继承，编译之后的结果为：

composes-inner

发现多了一个src-styles-index__red--1ihPk的类名，正是我们上面继承的那个类

除了在自身模块中继承，我们还可以继承其他文件中的CSS规则，具体如下：

我们再styles文件夹下新建一个color.css

/* color.css */
.red {
    color: red;
}

.blue {
    color: blue;
}

然后在index.css文件中导入

/* index.css */
.red {
    color: red;
}

.header {
    font-size: 32px;
}

.title {
    color: green;
    composes: blue from './color.css';
    composes: red;
    border-bottom: 1px solid #ccc;
    padding-bottom: 20px;
}

最终我们会发现文字的颜色为绿色，可见自身模块声明优先级最高，如果把自身申明的color去掉，那么自身引入和从其他文件引入的相同申明又该如何显示呢？

答案是自身引入的声明的优先级会比较高。

override

总结

至此，所有的CSS Modules用法就已经介绍完毕了，至于后续的还有如何应用于React、Vue以及Angular中，相信掌握了上面的内容之后就可以知道怎么写了，如何与预处理器一起使用相信问题也不大。

最后，本文代码仓库库为：https://github.com/Rynxiao/css-modules-demo

参考链接

我只是一只小菜鸟，但我并没有停下学习的脚步^_^ 另外，觉得这篇文章不错，可以随手点个赞么？求星星

qq_38462207
关注
Vue3新特性之在Composition API中使用CSS Modules
10-15
**什么是CSS Modules** CSS Modules提供了一种方式来隔离CSS，使得每个组件可以拥有自己的样式空间，避免全局CSS选择器导致的样式污染。它将CSS文件中的类名转换为唯一的哈希值，确保在不同模块间不会冲突。Vue ...
在create-react-app中使用css modules的示例代码
10-18
CSS Modules是一种流行的CSS代码组织方式，它通过将CSS类名转换为唯一的哈希值，以保证类名的全局唯一性。这意味着在一个文件中定义的样式类不会影响到其他文件中的同名类。这种做法极大地提高了样式的可管理性和...
CSS Modules 入门教程
weixin_34324081的博客
08-27 258
为什么引入CSS Modules 或者可以这么说，CSS Modules为我们解决了什么痛点。针对以往我写网页样式的经验，具体来说可以归纳为以下几点： 全局样式冲突 过程是这样的：你现在有两个模块，分别为A、B,你可能会单独针对这两个模块编写自己的样式，例如a.css、b.css，看一下代码 // A.js import './a.css' const html = '<h1 class="...
css入门教程资料（1）
newhappy的专栏
04-06 1851
CSS（Cascading Stylesheets，层叠样式表）是一种制作网页的新技术，现在已经为大多数的浏览器所支持，成为网页设计必不可少的工具之一。使用CSS能够简化网页的格式代码，加快下载显示的速度，也减少了需要上传的代码数量，大大减少了重复劳动的工作量。尤其是当你面对的是有数百个网页的站点时，CSS简直象是神对我们的恩赐！前言CSS（Cascading Stylesheets，层叠
CSS Modules 用法教程
蚁族的奋斗的博客
10-29 274
http://www.ruanyifeng.com/blog/2016/06/css_modules.html css-loader 和 styles-loader 的css 变成对象，插入到dom中 只有在vue react 等（有虚拟dom 的框架中，因为可以将class 作为变量输入） ...
css入门教程
逛窑子的李靖的博客
04-28 227
文章目录1 css概述1.1 什么是css?1.2 css发展史2 css使用2.1 快速入门2.2 三种css导入方式2.2.1 行内样式2.2.2 内部样式2.2.3 外部样式3 选择器3.1 基本选择器3.1.1 标签选择器3.1.2 class选择器3.1.3 id选择器3.2 层次选择器3.2.1 后代选择器3.2.2 子选择器3.2.3 弟弟选择器3.2.4 通用弟弟选择器3.3 结构伪类选择器3.4 属性选择器4 美化网页元素4.1 文本样式4.2 超链接伪类4.3 列表4.3 背景图片及
css入门教程（一）
夏至的博客
01-23 516
CSS入门（一） 一.什么是CSS 1.CSS： cascading style sheet，中文译名为样式表或层叠样式表，是网页制作时采用的一种技术，用于更加灵活、有效地控制网页的布局、颜色、字体、背景等显示效果。 2.层叠次序： 样式通常保存在.css文件中，通过编辑一个外部的.css文件，可以同时控制多个页面的样式和布局。同样，一个页面也可以引入多个外部样式表。因此，这里会
详解使用create-react-app添加css modules、sasss和antd
10-18
在本文中，我们将深入探讨如何使用`create-react-app`来集成`css modules`、`sass`以及`antd`这个流行的React UI组件库。`create-react-app`是Facebook提供的一个快速初始化React项目的工具，它默认提供了基础的配置...
es-css-modules：结合了CSS模块和ES导入的PostCSS插件
02-05
npm install --save-dev es-css-modules 该项目仍保持低，尽管提交活动。 如果发现任何错误或想要请求功能，请提出问题！ 什么和为什么？ 我假设您已经在CSS模块上出售了。 如果您还没有使用CSS模块，那么绝对应该...
react-native-css-modules：使用CSS，PostCSS，Sass，Less或Stylus样式化React Native组件
02-04
总的来说，`react-native-css-modules`为React Native应用引入了强大的样式处理能力，让开发者能够使用他们熟悉的CSS预处理器以及Web开发中的高级特性。这不仅提高了代码质量，也简化了跨平台开发时的样式管理，使得...
学习CSS3这一篇就够了
热门推荐
轻松的小希
11-25 4万+
目录CSS第一章 CSS概述1.1、概述1.2、语法1.3、注释1.4、如何创建并引用1.4.1、外部样式表（外联式）1.4.2、内部样式表（内联式）1.4.3、内联样式（行内式）1.5、三种引入优先级第二章 CSS选择器2.1、id选择器2.2、class选择器2.3、标签选择器2.4、子代选择器2.5、后代选择器2.6、相邻兄弟选择器2.7、后续兄弟选择器2.8、交集选择器2.9、并集选择器2.10、通配符选择器2.11、伪类选择器2.11.1、anchor伪类2.11.2、input伪类2.11.3、
css快速入门教程
sc909090的博客
11-04 1649
前言  在开始之前，先做说明：本文只涉及到基本css知识，如果有做前端开发的同学跳过即可，本文针对刚刚入门以及从其他方向转向前端开发的同学。众所周知，CSS并不是一门编程语言，它的学习在前期主要来源于对属性的积累和各种属性的联合搭配，所以并不存在学通一门编程语言再学css就进度飞快的情况.  本文总结了作者所认为的，css入门必学的知识点，其他的可以在开发中，通过百度练习逐渐掌握，以下是本文所涉及的内容。 css基本使用方式和常用选择器 css层叠性和权重 css常用属性 css盒子模型 浮动 posit
一套完整的CSS入门教程
AhCola
09-09 829
最近花了点时间，整理了一下之前的CSS博客文章，完成了这个CSS教程。也为我的个人网站，增加了一个教程模块。教程地址：请点击这里。 该教程是一套完整的CSS入门教程，看了绝对不会吃亏，不会上当☺。 我的个人网站也欢迎大家光临，你有任何问题都可以向我咨询，可以在我的文章下方留言，或者给我发邮件。 ...
CSS学习教程之简单入门
cug-jdc的博客
07-12 520
层叠样式表（CascadingStyleSheet，简称：CSS）是为网页添加样式的代码。本学习教程主要介绍 CSS 的基础知识，并解答类似问题：怎样将文本设置为黑色或红色？怎样将内容显示在屏幕的特定位置？怎样用背景图片或颜色来装饰网页？做一个简单的入门。对于CSS的学习可以分为以下四个部分来阶梯型进行： CSS基础 该部分介绍 CSS 的基础知识，包括选择器和属性，编写 CSS 的规则，将CSS 应用于 HTML 的方法，如何在 CSS 中指定长度、颜色和其他单位，层叠与继承，盒模型基础以及 CS..
CSS入门
qq_47560372的博客
08-03 265
CSS：美化HTML页面，设置网页样式、布局。
CSS 零基础入门教程
最新发布
qq_67140973的博客
03-18 964
CSS（Cascading Style Sheets）是一种用于描述网页表现的样式表语言。CSS可以静态地修饰网页，也可以与JavaScript等脚本语言结合，动态地修改网页中元素的样式。CSS能够精确控制网页中元素的位置和排版，支持各种字体和字号样式，并允许编辑网页对象和模型的样式。它使得网页内容与表现相分离，提高了网页的可读性和可维护性，同时也加快了网页的下载和加载速度。CSS可以应用于多种媒体，如屏幕、打印和移动设备等。
【CSS】入门级教学（超级细致版本）
懒羊羊的博客
03-20 2942
html+css CSS是用来修饰HTML内容的打个比方 HTML相当于你买了一间房子而CSS就相当于装修这间房子。HTML定义网页的结构,主要让页面的内容结构化、块状化 CSS控制 HTML的标签,定义所需要的样式，美化网页。 p{}是用来修改段落间距参数的，针对于换行的元素之间 CLASS .****意思是名为****的类这样的标签
项目中使用 CSS Modules 用法
Xpy 的博客
04-14 810
CSS Modules 用法 地址：阮一峰博客教程 一、案例 https://github.com/ruanyf/css-modules-demos $ git clone https://github.com/ruanyf/css-modules-demos.git 二、配置 webpack.config.js。 module.exports = { entry: __dirname + '/index.js', output: { publicPath: '/', filen
CSS Modules - CSS模块化
weixin_43924896的博客
06-06 2381
介绍CSS Module的原理和语法，以及实际的应用范围
深入理解CSS Modules：解决样式冲突与作用域问题
CSS Modules通过模块化的概念，为CSS引入了局部作用域，从而使得每个CSS文件内的样式规则在导入到JavaScript或HTML时，都会被转换成唯一的、不可预测的类名，确保了样式不会在不同组件之间产生冲突。 层叠样式表...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值