曲径通幽论坛

标题: CSS 中的继承关系 [打印本页]

作者: beyes 时间: 2015-12-21 01:38
标题: CSS 中的继承关系
text-align:inherit 该属性表示对齐方式为向下继承，CSS 本身就具有这种特性。下面举例说明。
代码：

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

复制代码

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

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

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

复制代码

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

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

复制代码

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

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

欢迎光临曲径通幽论坛 (http://www.groad.net/bbs/)