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尝试相同的事情，结果相同 - 样式＆＃34;泄露＆＃34;在其他没有提及的桌子上。

Q1：为什么这些风格适用于不引用它们的元素？

Q2：是否有CSS方式说＆＃34;根本不对这个特定元素应用任何样式＆＃34;？

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

您不必将其定义为表格。

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

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

4 个答案: