css3 系列之 all

854 阅读1分钟
原文链接: mp.weixin.qq.com

编语:其实小编相信还是有大部分的同学应该没有用过它,一般混迹 w3、webkit 或者 MDN 的可能会接触更快一点,所以简单快速普及一下

正文

1、它有什么用?

重置所有 CSS 属性,除了 unicode-bididirection 之外 为 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