CSS 样式 "leaking"到非预期元素，为什么会发生以及如何防止？

Question

根据 W3Schools CSS 注释，如果您在元素上使用 ID，则为该 ID 定义的 CSS 样式(使用#id_name)应该只应用于该元素，这就是您应该如何设置元素样式出现一次。

我有一个网站，其中包含一个显示表(实际表格数据，它是不同分类的电话号码网格)。所以我将表格放在一个 div 中，并为该 div 设置一个 ID。然后，我在样式表中为 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 尝试过相同的操作，结果相同 - 样式“泄漏”到其他未提及它们的表中。

问题 1:为什么将这些样式应用于未引用它们的元素？

问题 2:是否有一种 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;
}