体会CSS3的all属性

文字© / 伍江涛

排版© / 杨环宇

在公司近期项目中，时常会用到CSS3，下面来浅谈下关于CSS3的个人见解

一、作用

all属性实际上是所有CSS属性的缩写，表示，所有的CSS属性都怎样怎样，但是，不包括unicode-bidi和direction这两个CSS属性。为什么会有这个CSS属性呢？我们可能知道，有些CSS属性值基本上所有CSS属性都有，比方说继承inherit!

二、语法和区别

支持三个CSS通用属性值，initial,inherit,unset。下面针对以下代码进行举例说明：

标题

p变文字

有序列表1

有序列表2

有序列表3

文本域

article {

background-color: #f0f3f9;

color: green;

}

article > textarea {

border: 1px solid #34538b;

background-color: #ffffe0;

color: red;

}

1、initial是初始值的意思，也就是，article元素下面所有的第一级子元素都除了unicode-bidi和direction以外的CSS都使用初始值。例如，,

元素浏览器内置的display:block直接拜拜了，都变成了inline元素。由于我们只是对相邻层级子元素进行了initial设置，因此，

元素不受影响，但是，由于在父元素不明的情况下，

元素的默认是打点，因此，这里从数字变成了点，list-style-type和list-style-position都变化了；

2、inherit是继承的意思，也就是，article元素下面所有的相邻子元素都除了unicode-bidi和direction以外的CSS都继承了元素的CSS。因此，,

元素还是块状的，background-color都是元素的背景色，color颜色也跟一样，是绿色（文本域的红色被干掉了）。不仅上面这些CSS，padding/margin也都继承了，只是默认是,看不出来；

3、unset是取消设置的意思，也就是，article元素下面所有的相邻子元素除了unicode-bidi和direction以外的CSS都干掉都不要，不要了那用什么呢？unset值的特性如下，当前元素浏览器或用户设置的CSS忽略，然后如果是具有继承特性的CSS，如color,则使用继承值；如果是没有继承特性的CSS属性，如background-color,则使用初始值。因此，,

元素的display属性值使用了initial初始值，因此变成了inline元素，两个同一行显示了；而这些元素的color颜色使用了inherit继承值，因此都是绿色，的背景色background-color不具有继承特性，因此使用的是initial初始值，也就是transparent透明；

三、总结

all所牵扯的CSS实在是太多了，我目前还是想不出有什么场景，就是要用这个CSS属性。或者说什么时候，希望特殊的元素一下子变成普通元素，例如，input输入框外面一个div，来个input，貌似还真有这样的场景，输入框不需要border不需要background不需要padding不需要margin.

如果您有想法与我们在这个大数据信息时代与我们合作共赢，可以通过微信公众号与我们取得联系，我们将为您提供最快最贴心的服务

微信公众号：衍金征信

听说做金融大牛们

都分享到朋友圈了

选择衍金 携手衍金

数据为本 科技铸金