CSS 中的继承关系

beyes

text-align:inherit 该属性表示对齐方式为向下继承，CSS 本身就具有这种特性。下面举例说明。
代码：

1. <div style="color: #00F;">
   
2.                 <p>
   
3.                         www.groad.net 曲径通幽
   
4.                 </p>

复制代码

上面代码将 <p> 标记中内容显示为蓝色。按照常理来说，<p> 标记内并没有什么规定显示其内容为蓝色，默认应该为黑色。但是，<p> 标记在这是 <div> 的子标记，反过来 <div> 是 <p> 标记的父标记。通俗的讲，谁包含谁，谁就是父；被包含的就是子；子继承父的属性。因此在这里，子元素 <p> 中的内容继承了父元素 <div> 的属性，因此其里边的内容显示为蓝色。

所以，如果父标记已经定义了属性，而子标记也打算用相同的属性时，不必要再为子标记单独的再写一份。只有不希望继承时，再另行定义，比如：

1. <div style="color: #00F;">
   
2.                 <p>
   
3.                         www.groad.net 曲径通幽
   
4.                 </p>
   
5. <p style="color:#6F0">
   
6.    [url]www.groad.net[/url] 曲径通幽
   
7. </p>
   

复制代码

如上代码所示，如果我在第 2 个 <p> 标记里再加一对 <span>标记，那么该标记里的内容是到底继承包含它的 <p> 标记还是其爷爷标记 <div> 呢？ 答案是继承 <p> 的。记住，永远是继承离它最近一个的属性。例如：

1. <div style="color: #00F;">
   
2.                 <p>
   
3.                         www.groad.net 曲径通幽
   
4.                 </p>
   
5. <p style="color:#6F0">
   
6.    [url]www.groad.net[/url] 曲径通幽
   
7.   <span> [url]www.groad.net[/url] </span>
   
8. </p>
   

复制代码

上面的 <span> 标记里的网址显示为绿色。

顺带提及 text-align:inherit 这个 inherit 属性。由于 CSS 默认就是继承的，因此如果要保持继承关系，可以不用书写该条属性，除非你希望来个左对齐（text-align:left）或是右对齐（text-align:right）。