CSS教程

CSS语法

CSS的继承是指被包在内部的标签将拥有外部标签的样式性质。CSS继承特性最典型的应用通常发挥在整个网页的样式预设，需要指定为其它样式的部份设定在个别元素里即可。但同时CSS继承也有很多规则，应用时候容易出现错误。

比如：body #header .topbar.logo{...}，这是因为利用了元素的继续关系，利用元素名，或者ＩＤ名和类名（也就是class名）来精确定位和描述某一个区域的css样式表格式。

根据CSS继承特性，子元素将从父元素继承属性。但是有时候并不总是这样。请看下面这条规则：

Body{color:blue}

根据这条规则，站点的 body 元素将优先使用蓝色字体。

通过 CSS 继承，子元素将继承最高级元素（在本例中是 body）所拥有的属性（这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。不需要另外的规则，所有 body 的子元素都应该显示蓝色字体，子元素的子元素也一样。在大部分的现代浏览器中确实是这样的。

但是如Netscape 4 等浏览器就不支持继承，它不仅忽略继承，而且也忽略应用于 body 元素的规则。IE/Windows 直到 IE6 还存在相关的问题，在表格内的字体样式会被忽略。所以我们经常需要借助于某些技巧，比如将CSS定义成这样：

Body,table,th,td{color:blue}

这样表格内的文字也会变成蓝色。

如果你不希望 "color:blue" 字体被所有的子元素继承，比如你希望段落的字体颜色是red。只需创建重写一个针对 p 的特殊规则，这样它就会摆脱父元素的规则，让P标签的CSS不继承：

body  {  

     color:blue;
     }



td, ul, ol, ul, li, dl, dt, dd  {

    color:blue;
     }



p  {color:red;}

我们看一下下面的例子就清楚了，这是CSS文件：

<style type="text/css">
td .a{color: #006600}
td.b{color: #FF0000}
</style>

以下是body里的代码：

<table>
  <tr>
  <td class="b">
  <div>
  <ul class="a">
  <li>这里是标签"li"Web教程网www.webjcw.cn</li>
  </ul>
  </div>
  </td>
  </tr>
</table>

这里的类名a有空格接着元素<td>，而类名b没有空格连着元素<td>，运行此代码，页面显示字体为绿色，这说明页面读取了样式表td空格a的内容，由此我们可以推断，页面样式表文件是按照页面元素由里到外的次序来读取的，取近舍远的原则。

其实这里加了空格的类名td .a是属于CSS继承，而不加空格的类名td.b属于选择器。比如我们将td .a的空格去掉，改成td.a，则字体颜色会变为红色，即采用了td.b的设置。因为<td class="b">这里的td标签里并没有class="a"代码，所以td.a在这里是没有意义的。

下面几节将为您详细介绍派生选择器、id选择器和类选择器的用法。