files/zh-tw/web/css/inheritance/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

---
title: 繼承
slug: Web/CSS/inheritance
translation_of: Web/CSS/inheritance
---
<h2 id="摘要">摘要</h2>

<p>每個 <a href="/en-US/docs/CSS/CSS_Reference" title="en/CSS_Reference">CSS property definition</a> 都寫道是否這個屬性預設有繼承: ("Inherited: Yes") 或是 預設沒有繼承: ("Inherited: no"). 這個設定將會在沒有位屬性標註值時發生.</p>

<h2 id="Inherited_properties" name="Inherited_properties">繼承屬性</h2>

<p>When no value for an <strong>inherited property</strong> has been specified on an element, the element gets the <a href="/en-US/docs/CSS/computed_value" title="en/CSS/computed_value">computed value</a> of that property on its parent element. Only the root element of the document gets the <a href="/en-US/docs/CSS/initial_value" title="en/CSS/initial_value">initial value</a> given in the property's summary.</p>

<p>A typical example of an inherited property is the {{ Cssxref("color") }} property. Given the style rules:</p>

<pre class="brush: css">p { color: green }</pre>

<p>HTML:</p>

<pre class="brush: html">&lt;p&gt;This paragraph has &lt;em&gt;emphasized text&lt;/em&gt; in it.&lt;/p&gt;</pre>

<p>the words "emphasized text" will appear green, since the <code>em</code> element has inherited the value of the {{ Cssxref("color") }} property from the <code>p</code> element. It does <em>not</em> get the initial value of the property (which is the color that is used for the root element when the page specifies no color).</p>

<h2 id="Non-inherited_properties" name="Non-inherited_properties">非繼承屬性</h2>

<p>When no value for an <strong>non-inherited property</strong> (sometimes called a <strong>reset property</strong> in Mozilla code) has been specified on an element, the element gets the <a href="/en-US/docs/CSS/initial_value" title="en/CSS/initial_value">initial value</a> of that property (as specified in the property's summary).</p>

<p>A typical example of a non-inherited property is the {{ Cssxref("border") }} property. Given the style rules:</p>

<pre class="brush: css"> p { border: medium solid }</pre>

<p>HTML:</p>

<pre class="brush: html">  &lt;p&gt;This paragraph has &lt;em&gt;emphasized text&lt;/em&gt; in it.&lt;/p&gt;</pre>

<p>the words "emphasized text" will not have a border (since the initial value of {{ Cssxref("border-style") }} is <code>none</code>).</p>

<h2 id="Notes" name="Notes">註</h2>

<p>{{ Cssxref("inherit") }} 關鍵字允許作者準確地去標註. 這個在繼承和非繼承屬性都是有效的.</p>

<h2 id="See_Also" name="See_Also">參見</h2>

<ul>
 <li><a href="/en-US/docs/CSS/CSS_Reference" title="CSS Reference">CSS Reference</a></li>
 <li>{{ CSS_key_concepts() }}</li>
 <li>{{ Cssxref("inherit") }}</li>
</ul>