CSS样式"泄漏"到非预期的元素,它为什么会发生以及如何防止它？

Question

根据W3Schools CSS的说明,如果您在元素上使用ID,那么为该ID定义的CSS样式(使用#id_name)应仅适用于该元素,这就是您应该如何设置仅出现一次的元素的样式.

我有一个包含显示表的站点(实际的表格数据,它是不同分类中的电话号码网格).所以我将表放在div中并将div设置为ID.然后我在stylesheep中为ID定义了样式.

HTML:

<div id='phone_number_grid'>
    <table>
    ...
    </table>
</div>

CSS:

#phone_number_grid table {
   border-collapse: collapse;
}
#phone_number_grid th,td {
   border: 1px solid #000040;
   background-color: #ccccff;
   padding: 5px;
}

该样式在其预期的表上完美地工作,但它也影响一个完全不同的表,它没有类或id设置,并且包含在一个完全不相关的div中,它具有自己的(完全不相关的)类设置,在不同的页面上使用相同的样式.

如何阻止#phone_number_grid样式影响不相关的表？

注意我之前在div上使用类ID尝试了同样的事情,结果相同 - 样式"泄露"到其他未提及它们的表上.

Q1:为什么这些样式适用于不引用它们的元素？

Q2:有没有CSS方式说"不要对这个特定元素应用任何样式"？

Answer 1

你的第二种风格扩展到所有td元素,而不仅仅是属于表#phone_number的那些元素.按以下更新.

#phone_number_grid table {
   border-collapse: collapse;
}
#phone_number_grid th, #phone_number_grid td {
   border: 1px solid #000040;
   background-color: #ccccff;
   padding: 5px;
}