1.特殊性和分类次序的问题
除了语法错误之外，比较常见的问题之一涉及特殊性和分类次序。在将一个规则应用于一个
元素时，却发现没有任何效果，这时往往存在特殊性问题。可以应用其他规则而且它们工作正常，但是某些规则似乎
不起作用。在这些情况下，问题往往是已经在文档的其他地方使用更特殊的选择器为这个元素定义了规则。

在下面的示例中，CSS开发人员将内容区域中所有段落的背景颜色设置为透明。但是，他们希望intro段落是橙色的，因此在iotra段落上直接应用了这个规则:
#content p{
background-color: transparent;
}
.intro{
background-color: #FEECA9;
}

如果在浏览器中测试这段代码，会看到intro段落仍然是透明的。这是因为与选择intro段落的选择器相比，选择
内容区域中所有段落的选择器的特殊性更强。为了实现想要的结果，需要让选择intro段落的选择器更特殊。在这种
情况下，最好的方法是在intro段落选择器的开头添加内容元素的id:
#content p{
background一color: transparent;
}
#content .intro{
background一color: #FEECA9;
}
2，空白边盛加的问题
空白边叠加(见第2章)是另一个如果误解就会导致许多麻烦的CSS特性。请考虑div元素内嵌套段落的简单示例:

div框设置了10像素的空白边，段落设置了20像素的空白边:
#box{
margin: 10px;
background-color:#d5d5d5;
}
P{
margin: 20px;
background一color:#66ggFF;
}

你会自然地认为产生的样式会像图9-2那样，在段落和div之间有20像素的空白边，在div外边围绕着i0像素的空白边。
但是，产生的样式实际上像图9-3这样。
这里发生了两个情况。首先，段落的20像素顶空白边和底空白边与div的10像素空白边叠加，形成一个单一的20像素
垂直空白边。其次，这些空白边不是被div包围，而是突出到div的顶部和底部的外边。出现这种情况是由于具有块级
子元素的元素计算其高度的方式造成的。
如果元素没有垂直边框或填充，那么它的高度就是它包含的子元素的顶部和底部边框边缘之间的距离。因此，
包含的子元素的顶部和底部空白边就突出到容器元素的外边。但是，有一个简单的解决方案。通过添加一个垂直边
框或填充，空白边就不再叠加了，而且元素的高度就是它包含的子元素的顶部和底部空白边边缘之间的距离。
为了让前面的示例看起来像图9-2这样，只需在div周围添加填充或边框:
#box(
mazgin: 10px;
padding: 1px;
background一color:#d5d5d};
}
P{
margin: 20px;
background一color:#6699FF;
}
空白边叠加的大多数问题可以通过添加透明的边框或1像素的填充来修复。

CSS常见问题图

了解更多网站制作相关文章请点击这里

上海SEO SEO上海区专业服务团队,为您提供优质全方位的SEO优化,网站优化,网站制作服务。