2

根据 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 方式来表示“不要对这个特定元素应用任何样式”？

4

4 回答 4

7

您的第二种样式扩展到所有 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;
}
于 2013-06-18T16:08:31.690 回答
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

于 2013-06-18T16:08:54.207 回答
2

您的问题出在这一行：

#phone_number_grid th,td {

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

你需要更明确一点：

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

将选择器放在自己的行上也可以使其更容易查看。

于 2013-06-18T16:10:16.487 回答
0

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;
}
于 2013-06-18T16:09:09.127 回答