Inheritance

📗 參考

• 🗣 Which CSS properties are inherited?

• 📗 SitePoint ⟩ CSS Inheritance: An Introduction

Second Tab

inherit

• inheritance flows down the DOM tree.

• use inherit to make inheritance take precedence over the cascaded value.

• use inherit to force inheritance of a property not normally inherited, such as border or padding. 👉See: border-box fix

intial

• Every CSS property has an initial (default) value. If you assign initial to that property, then it resets to its default value.

• remove a border: border: initial

• restore default width: width: initial

property	default value	note
width	auto
display	inline

examples

inherit

/* global link color */
a:link { color: blue; }

/* parent */
.footer { 
    color: #666; 
    background-color: #ccc; 
    padding: 15px 0; 
    text-align: center; 
    font-size: 14px; 
}

/* child */
.footer a { 
    color: inherit;             /* inherit from parent: #666 */
    text-decoration: underline; 
}

initial

inherited properties

參考

• Which CSS properties are inherited?

text

list

table

others

references

📘 官方

• Inheritance

🗣 討論