体会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.

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

微信公众号:衍金征信

听说做金融大牛们

都分享到朋友圈了

选择衍金 携手衍金

数据为本 科技铸金

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181210G0LTOC00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券