在過去的幾年裡,我經常使用 unset 關鍵字來重置 CSS 屬性。我注意到我直觀地使用它來重置屬性。但對我來說直觀的東西對你來說可能並不直觀。讓我澄清一下。
例如,我多年來一直使用 border: none 來刪除元素的邊框。這些天,我使用 border: unset,邊框就消失了。
邊框很簡單,因為它們是非繼承屬性,這表示子元素不會從其父元素繼承值。
邊距和填充也是如此,我經常需要重置它們。
但是繼承的屬性呢?在下面的範例中,最後一個按鈕將具有藍色。這是因為未設定屬性本質上意味著繼承繼承的屬性顏色,按鈕就是這樣做的並將顏色設為藍色。
這些事情對我來說很有意義,我是一位經驗豐富、了解繼承的 CSS 開發人員。但對於初學者來說,這些概念並不是微不足道的。我敢說大多數初學者甚至沒有聽說過繼承和非繼承屬性,或者可能會忘記它們。他們可能會了解級聯,這是不一樣的。
最終的樣式是基於級聯、特異性、繼承等。 MDN 有一篇關於理解級聯、特異性和繼承的非常紮實的文章。
這裡同樣重要的是繼承的概念,這意味著預設某些 CSS 屬性會繼承目前元素的父元素上設定的值,而有些則不會。這也可能會導致一些您可能意想不到的行為。
—MDN
最後一句話看起來很可怕,不知道繼承會帶來什麼。如果您記住哪個財產將從其父母那裡繼承價值,這可能會有所幫助,但這會隨著時間的推移而發生。查找這些資訊可能會很乏味——查看文件或在筆記中搜尋。重要的是知道繼承的存在以及它可能會導致問題,尤其是在使用 unset 關鍵字時。
我認為列出我經常取消設定的非繼承屬性可能會很有用,因此可以安全地取消設定:
當涉及重設 CSS 屬性時,unset 關鍵字會派上用場。但是,重要的是要考慮您正在使用的財產的繼承。
如果你想確保最大的安全性,取消設定不繼承的屬性可能是你最好的選擇。透過這樣做,您可以消除任何潛在的風險,並放心您的樣式表是安全的。
以上是重設 CSS 未設定的詳細內容。更多資訊請關注PHP中文網其他相關文章!