如： 给一个封装好的组件赋予 miniSize 的className，但是它内部有一个className为 mini-size-text span元素，我想修改它的font-size，应该怎么做？

Child.jsx

<div className={className}>
    <span className="mini-type-title"></span>
    <span></span>
 
Parent.jsx
 
 
<Child className={`${styles.miniSize}`}/>
 
直接使用子元素选择器是不生效的，因为CSS Module会对编译文件内部的所有className
 
.miniSize{
    .mini-type-title{
        font-size: 12px;
而使用 span 选择器，会统一修改其他span元素的样式
 
使用 :global
 
.miniSize{
    :global .mini-type-title{
        font-size: 12px;
.miniSize{
    :global{
        .mini-type-title{
            font-size: 12px;
                                    正常使用CSSModule可以防止样式被覆盖可以很好做样式隔离，但通常我们通用模块的组件的class或是第三方组件class不一定能满足我们的使用，需要进行样式覆盖，下面就介绍了利用CSSModule的作用域，那如何更优雅的覆盖样式，避免全局污染呢？css的规则是全局的，按理说是没有作用域这个概念的，任何一个样式的规则对全局都是有效的，而要想产生局部的作用域，唯一的方法就是使用一个独一无二的名字，不与其它的选择器重名，这个便是CSSModule的做法。或是下面的写法，这种写法适用于单个或比较少的情况。
下面是会被继承的CSS样式属性：
azimuth, border-collapse, border-spacing,
caption-side, color, cursor, direction, elevation,
empty-cells, font-family, font-size, font-style,
font-variant...
                                    文章目录一、flex布局原理布局原理二、flex布局父项常见属性【1】flex-direction【2】justify-content【3】flex-wrap【4】align-content【5】align-items【6】flex-flow三、flex布局子项常见属性【1】flex【2】align-self【3】order
一、flex布局原理
flex是flexible Box的缩写，意思是“弹性布局”，用来为盒装模型提供最大的灵活性。任何一个容器都能指定为flex容器。
当我们为父盒子设为fle
                                    CSS作用域是全局的，项目越来越大，人越来越多，命名慢慢成为了问题,难免会出现命名重复的问题，于是也诞生了相应的模块化解决方案。
目前有这几类：BEM即为块级元素修饰字符（Block Element Modifier），以 .block__element–modifier 形式命名，即 .模块名__元素名–修饰符名 三个部分，用双下划线 __ 来明确区分模块名和元素名，用双横线 – 来明确区分元素名和修饰符名。
这种命名主要还是人为去遵守命名约束Atomic CSS是原子化的CSS，就是将单一的属性封装一个
 您知道CSS图灵完成吗？ 您是否知道您可以使用它来进行一些非常严肃的逻辑样式设计？ 好吧，你可以！ 您不必在JavaScript中设置所有基于逻辑的样式规则，甚至不必使用JavaScript来设置要针对其进行样式设置的类。 在许多情况下，C...
                                    当使用原生的标记进行开发时，一般要覆盖掉标签默认样式，以便达到我们想要的样式@charset "utf-8";
body {
  font-size: 12px;
  margin: 0;
  padding: 0;
  font-family: "microsoft yahei", "arial", "verdana";
  color: #333;