编语:其实小编相信还是有大部分的同学应该没有用过它,一般混迹 w3、webkit 或者 MDN 的可能会接触更快一点,所以简单快速普及一下
正文:
1、它有什么用?
重置所有 CSS 属性,除了 unicode-bidi、direction 之外 为 initial 或者 inherited 值
2、兼容性?
http://caniuse.com/#search=all
3、语法
.test {
all: initial;
// 来自:https://developer.mozilla.org/en-US/docs/Web/CSS/all
all: initial;
all: inherit;
all: unset;
/* CSS Cascading and Inheritance Level 4 */
all: revert;
4、案例
// html
我们是 DDFE
// css
html {
font-size: 12px;
background-color: #edeef1;
p {
color: #fa8919;
font-size: 14px;
.initial > * {
all: initial;
.inherit > * {
all: inherit;
.unset > * {
all: unset;
我们通过下拉框切换动态修改 container 的 class,来设置 initial、inherit、unset
默认情况:
initial
不使用浏览器默认样式
都是 inline(初始值)
inherit
不使用浏览器默认样式
继承 block
unset
不使用浏览器默认样式
都是 inline(初始值)
示例中所有代码:http://jsbin.com/fizabanara/edit?html,css,js,output