精通CSS——chapter9（bug和修复bug）

9.1捕捉bug

1、特殊性和分类次序的问题

除了语法错误之外，比较常见的一个问题与特殊性和分类次序有关，在将一个规则应用于一个元素的时候，如果发现没有任何效果，这时往往存在特殊性问题

.content p{

    background-color: white;

}

.intro{

    background-color: orange;

}

像这个如果他们希望intro段落是橙色的，但是没有用，intro仍然是白色的，因为与选择intro段落的选择器相比，选择内容区域中所有段落的选择器的特殊性更强，为了实现想要的效果，需要让选择intro段落的选择器更特殊。所以我们需要这样做

.content p{

    background-color: white;

}

.content .intro{

    background-color: orange;

}

F12是调试CSS的好工具，他有许多有用的特性，其中之一就是可以通过查看元素了解哪些样式被覆盖了，对于样式表中其他地方被覆盖的样式，他会加上删除线。

2、外边距叠加的问题

<div id="box">

        <p>This paragraph has a 20px margin</p>

</div>

<style>

        #box{

            margin:10px;

            background-color: #d5d5d5;

        }

        p{

            margin: 20px;

            //padding:1px;

            background-color: #6699FF;

        }

</style>

我们创立个这个东西，本来想获得的效果是像要像左边那种图那样的，但是最终我们却获得了右边这幅图。

这是因为段落的20px顶外边距和底外边距与div的10px外边距叠加，而且就算是div的px比段落的大，也还是一样的效果。

而且，这些外边距不是被div包围，而是突出到div的顶部和底部的外边，出现这种情况是由于具有块级子元素的元素计算其高度的方式造成的。

有一个简单的解决方案，那就是代码里面注释的那点东西，加一个内边距就可以不再叠加了。