1.&
&表示在嵌套层次中回溯一层。
.tabActive {
&:after {
color: red;
}
}
同等于
.tabActive:after {
color: red;
}
2. ::before ::after :before :after
:before和::before一样，:after和::after一样。
:before和:after是css2的写法；::before和::after是css3的写法。
但是前者兼容性比后者好。
伪元素要配合content属性一起用（不然伪元素不起作用），不能通过js操作，在css渲染层加入。
:before和:after用于在真正元素内部之前和之后加入内容（但是你可以用定位将它放到任何一个位置）
可以用:before和:after来清除元素的浮动。
.tabActive:after {
clear: both;
}
3.overflow的参数
hidden表示超过规定区域的内容会被修剪掉，隐藏掉不可见。
scroll表示超过规定区域的内容，内容会被修剪，但是浏览器会显示滚动条以便查看被修剪的内容；但是如果内容没有溢出，也会有滚动条，只是滚动条被禁用了。
auto和scroll的区别就是内容没有溢出的时候，不会出现滚动条。
inherit表示从父元素继承overflow属性的值
4.flex布局
5. :global
用:global{}将需要修改的样式包裹起来可以修改antd等组件的默认样式，覆盖之前的，全局使用。
是这个包裹的生明的class不会被编译成哈希字符串（其他的编译成哈希字符串是为了唯一性，保证和别人的选择器不重名）
6.为什么改字体有时候不发生变化呢？
谷歌浏览器识别的最小字体为12px。
小于12px不会发生变化。
7.+,~
a+b：代表选择a后面第一个兄弟元素
a~b：代表a后面的所有b兄弟元素
8.classnames
react中引入classnames
适用于需要判断的类名，可以简化代码，不用去进行判断，直接在类名后赋值true 或者 false
<div className={classNames({box1:true,box2:true})}>
</div>
也可以这么写（适用于多个类，前面box1样式一样提出出来，后面box2不一样分开写）
<div className={classNames(box1,box2)}>
</div>
渲染为：
<div class='box1 box2'>
</div>
选择器 A B 的含义为，会应用这两个选择器的样式，但是当样式属性有冲突时，以后者为准。
React也可以通过这样去实现，只不过代码比较麻烦
<div className={`${styles.box1} ${styles.box2}`}>
</div>
同样渲染为
<div class='box1 box2'>
</div>
189
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
