css3新增屬性all是什麼？有什麼用？

為了web前端開發的方便，css3新增了許多屬性（新特性），這篇文章就跟大家介紹css3新增屬性all是什麼，讓大家了解all屬性的作用和使用方法。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。 【想要了解更多css3相關知識，推薦影片學習：css3教學】

#首先我們了解css3 all屬性是什麼？可以做什麼？

all屬性其實是所有CSS屬性的縮寫，表示：所有的CSS屬性都應該如何；但是，不包括unicode-bidi和direction這兩個CSS屬性。因此，我們應該可以知道all屬性的作用了：

all屬性：可以重置所有選定的元素屬性，除了兩個控製文字方向屬性：direction屬性和unicode-bidi屬性。

.demo{
  all: unset;
}

它的重點是允許元件層級的樣式重置。有時候，從頭開始設定想要的樣式，比在原本的樣式上進行修改要簡單多了。

下面我們來看看all屬性可以設定的屬性值：

1、initial：將所有選定元素的屬性重設為CSS規格中定義的初始值。

2、inherit：selected元素繼承其所有父元素的樣式，包括通常不可繼承的樣式。

3、unset：selected元素繼承從父元素向下傳遞的任何可繼承值。如果沒有可用的可繼承值，則CSS規範的初始值將用於每個屬性。

說明：

在css中一些屬性沒有在規格中明確定義初始值，而是允許使用者自行設定初始值，例如：顏色和字體系列。

all是一個簡寫屬性，因為它允許我們使用單一宣告一次控制每個 CSS屬性的值。但是，它又與大多數簡寫屬性不同，沒有實用的「longhand」版本，也沒有子屬性。

下面我們來看看all的示範效果：

html程式碼：

<div class="container">
	<div class="parent">
		<div class="alltest">
			<p>Change this div&#39;s <code>all</code> value.</p>
		</div>
	</div>
</div>

css程式碼：

.container {/* 继承 */
  font-family: sans-serif;
  font-size: 1.5em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 1px 1px 1px black;
}

.parent {
  color: green;/* 继承*/
  
  /* 不继承 */
  background-color: gainsboro;
  width: 80%;
  padding: 1em;
  border: 5px solid #E18728;
}

效果圖（不使用all屬性） ：

然後設定.alltest選擇器裡分別加入all屬性：

all:initial;

##

all:inherit;

#

all:unset;

注意，當inherit值被使用，div繼承每一個從其父財產，包括它的width，padding和border，這些通常是不被繼承的。

瀏覽器支援

數字表示瀏覽器支援該版本及以上版本的功能。

pc端

手機/平板端

總結：以上就是本篇文的全部內容，希望對大家的學習有所幫助。

以上是css3新增屬性all是什麼？有什麼用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！