包含ID

Question

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

#tableProducts {
   border-collapse:collapse;
}

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

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

text-align正常工作，但页面上的其他表格正在应用上面定义的tr, td规则。

我知道我可以简单地为要使用的元素<tr>和<td>定义一个类，但我想更好地理解CSS。

Answer 1

你需要替换......

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

...与......

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

解释

Selector #tableProducts tr, td适用于与这两个选择器之一匹配的所有元素：

• #tableProducts tr
• td

这意味着选择器#tableProducts tr, td将适用于所有td元素。

Selector #tableProducts tr, #tableProducts td适用于与这两个选择器之一匹配的所有元素：

• #tableProducts tr
• #tableProducts td

因此，#tableProducts tr, td替换#tableProducts tr, #tableProducts td意味着您的选择器不再适用于所有td元素，而只适用于td内的#tableProducts个元素，你要去做什么！

Answer 2

其他表继承样式的原因是因为逗号后面的第二个选择器定位页面中的所有<td>元素，换句话说，您应该通过在{{1}前面添加前缀来限制选择器的范围}，像这样：

#tableProducts

注意：将每个选择器放在一个新行中是一个很好的做法，这可以帮助您清晰明了并使代码更具可读性，在您的代码中使用ID也是一种不好的做法。 CSS，使用类，当尝试命名类时，确保它们只包含小写字母，数字和连字符，因此对您的问题的最佳答案是：

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

希望它有所帮助：）

Answer 3

https://jsfiddle.net/0qvm6tc6/

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

Answer 4

尝试，

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

Answer 5

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