有趣的Css世界CSS变量对比Sass和Less的变量，又有它的过人之处。修改 'background-color'。

css权重级别

!important > 内联 style > id > class > element

取消鼠标事件

pointer-events: none;

动态计算height width

max-width: calc(100% - 12px);
max-height: calc(100% - 12px);

首字母大写

text-transform: capitalize;

默然填充占位符

<div classname="no-data"></div>
.no-data:empty:after {
	content: '--'
}

var() 方法

CSS变量对比Sass和Less的变量，又有它的过人之处。

浏览器原生特性，无需经过任何转译就可直接运行
DOM对象一员，极大便利了CSS与JS之间的联系
不需要在浏览器编译css（例如less -> modifyVars，浏览器会卡顿）

/* 定义颜色 */
:root {
  --myColor: '#fff';
}

/* 利用公共元素，当它匹配了特定属性时，改变变量对应色值 */
html[data-theme="dark"] {
  --myColor: '#000';
}

/* 引用颜色 */
.myComponent {
  color: var(--myColor);
}

mix-blend-mode 反色效果

修改 'background-color'。

<body>
  <div><!-- 一个紧跟在 body 之后的空的 div --></div>
  <!-- 这里开始是页面的主要内容 -->
</body>

div {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; /* fixed 定位覆盖页面 */
  z-index: 9999; /* 层叠放到很高的一个位置，盖在页面上 */
  mix-blend-mode: difference; /* 混合模式，反色 */
  background-color: #fff; /* 结合混合模式做反色处理的对比色 */
  pointer-events: none; /* 作为一个层覆盖在元素上，但不能妨碍页面元素点击，添加一个穿透效果 */
}