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 中，它有自己的（完全不相关的）类设置，on使用相同样式羊的不同页面。

如何阻止#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;
}

Answer 2

#phone_number_grid th,td 影响所有#phone_number_grid th 和所有td，不仅所有#phone_number_grid th 和所有#phone_number_grid td。

所以写在你的选择器中：

#phone_number_grid th, #phone_number_grid td

Answer 3

你的问题在于这一行：

#phone_number_grid th,td {

用逗号分隔的 CSS 选择器实际上并不像您最初期望的那样读取。它们是两个独立的选择器，因此您实际上匹配 #phone_number_grid th 和所有 td 元素。

你需要更明确一点：

#phone_number_grid th,
#phone_number_grid td {
    ...
}

将选择器放在单独的一行上可能也更容易查看。

Answer 4

t您不必将其定义为表格。

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