html - CSS样式范围以及ID中的规则

如果我有一个ID为tableProducts的表，并且其样式在products.css中定义如下：

#tableProducts {
   border-collapse:collapse;
}

如何格式化CSS规则，以便tableProducts中的任何td，tr或p都将继承CSS规则，以便具有不同ID的任何其他表都不会继承如下定义的规则：

#tableProducts tr, td {
      text-align:center;
}

文本对齐可以正常工作，但是页面上的其他表正在应用上面定义的tr, td规则。

我知道我可以简单地为元素<tr>和<td>定义一个类以使用，但是我正在努力更好地理解CSS。

最佳答案

其他表继承样式的原因是因为逗号后的第二个选择器将页面中所有<td>元素作为目标，换句话说，您应该通过在选择器前面加上#tableProducts来限制选择器的范围，如下所示：

#tableProducts tr, #tableProducts td {
  text-align: center;
}

注意：将每个选择器放在换行符是一个好习惯，这可以帮助您提高清晰度，并使代码更具可读性，在CSS中使用ID代替类也是一种不好的做法，为您的班级命名，以确保它们仅包含小写字母，数字和连字符，因此对您问题的最佳答案将是：

.table-products tr,
.table-products td {
  text-align: center;
}

希望它能帮助:)