开发手册HTMLCSSJavaScript
HTML手册CSS手册CSSCSS 教程CSS 简介CSS 基础语法CSS 高级语法CSS 派生选择器CSS id 选择器CSS 类选择器CSS 属性选择器CSS 创建CSS 背景CSS 文本CSS 字体CSS 链接CSS 列表CSS 表格CSS 轮廓CSS 框模型概述CSS 内边距CSS 边框CSS 外边距CSS 外边距合并CSS 定位概述CSS 相对定位CSS 绝对定位CSS 浮动CSS 元素选择器CSS 选择器分组CSS 类选择器详解CSS ID 选择器详解CSS 属性选择器详解CSS 后代选择器CSS 子元素选择器CSS 相邻兄弟选择器CSS 伪类CSS 伪元素CSS 对齐CSS 尺寸CSS 分类CSS 导航栏CSS 图片库CSS 图片透明CSS 媒介类型CSS 注意事项CSS 总结CSS 实例CSS 参考手册CSS 选择器CSS 听觉参考手册CSS 网络安全字体CSS 单位CSS 颜色CSS 颜色值CSS 颜色名CSS 颜色十六进制CSS3CSS相关JavaScript手册

CSS 高级语法

选择器的分组

你可以对选择器进行分组,这样,被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中,我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。

h1,h2,h3,h4,h5,h6 {
  color: green;
  }

继承及其问题

根据 CSS,子元素从父元素继承属性。但是它并不总是按此方式工作。看看下面这条规则:

body {
     font-family: Verdana, sans-serif;
     }

根据上面这条规则,站点的 body 元素将使用 Verdana 字体(假如访问者的系统中存在该字体的话)。

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

但是在那个浏览器大战的血腥年代里,这种情况就未必会发生,那时候对标准的支持并不是企业的优先选择。比方说,Netscape 4 就不支持继承,它不仅忽略继承,而且也忽略应用于 body 元素的规则。IE/Windows 直到 IE6 还存在相关的问题,在表格内的字体样式会被忽略。我们又该如何是好呢?

友善地对待Netscape 4

幸运地是,你可以通过使用我们称为 "Be Kind to Netscape 4" 的冗余法则来处理旧式浏览器无法理解继承的问题。

body  {
     font-family: Verdana, sans-serif;
     }

p, td, ul, ol, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }

4.0 浏览器无法理解继承,不过他们可以理解组选择器。这么做虽然会浪费一些用户的带宽,但是如果需要对 Netscape 4 用户进行支持,就不得不这么做。

继承是一个诅咒吗?

如果你不希望 "Verdana, sans-serif" 字体被所有的子元素继承,又该怎么做呢?比方说,你希望段落的字体是 Times。没问题。创建一个针对 p 的特殊规则,这样它就会摆脱父元素的规则:

body  {
     font-family: Verdana, sans-serif;
     }

td, ul, ol, ul, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }

p  {
     font-family: Times, "Times New Roman", serif;
     }
关于千图| 赞助千图 |千图首页   Copyright2014千图网   沪ICP备10011451号-6   用时:0.0246秒

千图网提示