Question

我想设置第二行td的行，其中tr具有rowRegular类，用于id =＆＃34; tbl＆＃34;

我有以下标记：

<table id="tbl">
  <tr class="rowX1">
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr class="rowRegular">
    <td>1</td>
    <td>Style me</td>
    <td>3</td>
  </tr>
  <tr class="rowRegular">
    <td>1</td>
    <td>Style me</td>
    <td>3</td>
  </tr>
</table>

我有以下css：

.rowRegular #tbl tr td:nth-child(2) { background-color: green; }

毋庸置疑，不应用背景颜色。我错过了什么？

Answer 1

这里有两个问题：（1）CSS选择器的排序不正确，以及（2）选择器中的过度特异性。解决第一个问题会得到理想的行为，但解决第二个问题会帮助您避免第一个问题，并使CSS更易于维护。

您想要的最好和最简单的版本可能就是：

.rowRegular > td:nth-child(2)

我会深入了解为什么会这样，但首先让我们来看看你的代码并解决问题。这是您当前的CSS声明：

.rowRegular #tbl tr td:nth-child(2)

让我们从右向左分解 - 最右边的选择器精确定位你想要定位的元素，而左边的选择器指定允许我们回到目标上的祖先。此代码表示您正在尝试选择：

公共父级中的每隔一个td元素，
常见tr元素中的任何位置
ID为#tbl
班级.rowRegular

这并不反映HTML中元素的顺序，因此Temani建议您更改选择器的顺序是正确的。他建议这样做：

#tbl tr.rowRegular td:nth-child(2)

这使得订单正确，但您仍然存在过度特异性问题，这使得CSS不太清晰，可读性差，更容易出错。 try to keep your specificity low的最佳做法是可读性和可维护性。除非您有令人信服的理由按ID进行定位或指定元素以及类，否则您应该简化选择器。

所以在这里，再次，可能是最好和最简单的版本，除非有其他限制：

.rowRegular > td:nth-child(2)

没有必要指定.rowRegular是tr元素，并且可能没有必要指定它位于标识为#tbl的表中。如果您单独选择课程，那就足够了 - 并且更容易阅读和维护。

另外，请注意我使用的是direct descendent or "child combinator"（>），以区别于general descendent combinator，这只是一个空格。在这种情况下，这不是绝对必要的，但这是一种很好的做法。这是因为一般的后代组合子将检查.rowRegular的每个后代，因此除了目标元素之外，还可能无意中选择子项的子项。这实际上是nth-child选择器的一个常见问题（尽管这种情况不太可能，因为你很少在HTML电子邮件之外嵌套表）。

danger of over-specificity是你最终写的CSS多于你需要的东西，这会变得笨拙且难以阅读，然后你继续写更多的东西，增加你自己的赌注以覆盖你的特异性早期的CSS。在你知道它之前，你必须在规则上加上!important注释以完成任何事情。

如何设置父tr具有某种风格的第二个td？

1 个答案: