体会CSS3的all属性

Posted 2021-04-09 衍金征信

文字© / 伍江涛

排版© / 杨环宇

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

一、作用

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

 

二、语法和区别

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

<article>

   <h6>标题</h6>

   <p>p变文字</p>

   <ol>

        <li>有序列表1</li>

        <li>有序列表2</li>

        <li>有序列表3</li>

   </ol>

   <textarea>文本域</textarea>

</article>

article {

   background-color: #f0f3f9;

   color: green;

}

article > textarea {

   border: 1px solid #34538b;

   background-color: #ffffe0;

   color: red;

}

       1、initial是初始值的意思，也就是，article元素下面所有的第一级子元素都除了unicode-bidi和direction以外的CSS都使用初始值。例如，<h6>, <p>元素浏览器内置的display:block直接拜拜了，都变成了inline元素。由于我们只是对相邻层级子元素进行了initial设置，因此，<li>元素不受影响，但是，由于在父元素不明的情况下，<li>元素的默认是打点，因此，这里从数字变成了点，list-style-type和list-style-position都变化了；

2、inherit是继承的意思，也就是，article元素下面所有的相邻子元素都除了unicode-bidi和direction以外的CSS都继承了<article>元素的CSS。因此，<h6>, <p>元素还是块状的，background-color都是<article>元素的背景色，color颜色也跟<article>一样，是绿色（文本域的红色被干掉了）。不仅上面这些CSS，padding/margin也都继承了，只是默认是0, 看不出来；

3、unset是取消设置的意思，也就是，article元素下面所有的相邻子元素除了unicode-bidi和direction以外的CSS都干掉都不要，不要了那用什么呢？unset值的特性如下，当前元素浏览器或用户设置的CSS忽略，然后如果是具有继承特性的CSS，如color, 则使用继承值；如果是没有继承特性的CSS属性，如background-color, 则使用初始值。因此，<h6>, <p>元素的display属性值使用了initial初始值，因此变成了inline元素，两个同一行显示了；而这些元素的color颜色使用了inherit继承值，因此都是绿色，<textarea>的背景色background-color不具有继承特性，因此使用的是initial初始值，也就是transparent透明；

 

三、总结

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

---

听说做金融大牛们

               选择衍金  携手衍金         

                数据为本  科技铸金