Question

我继承了一些遗留应用程序，一些客户仍在使用并希望升级。最近的一次升级“打破了”现有的CSS，解决问题的最简单方法是“打破”一个小桌子。

标记是嵌套表上的嵌套表。但是为了找到最基本的东西，这里是找到我的桌子的最近的版本。

<div id="someId">
  <table>
    <tr>
      <td>
        <table>
          <tr>
            <td>
              <table> <!-- not this table --> </table>
            </td>
            <td>
              <table> <!-- THIS ONE!! --> </table>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</div>

还有其他表格，行和单元格分散在各处，但这种结构可以帮助你。

使用“直接后代”符号很棘手，因为表格在行和单元格以及其他表格中下降。所以table>table>table不会这样做。但是如果你选择一般的后代选择器，你最终会选择太多的东西table table table会得到一大堆表。这是我到目前为止最接近的：

#someId>table table td:nth-child(2) table {
  background-color: red;
}

我通常很乐意添加更多>选择器;但是，我相信浏览器本身正在填充tbody元素等等，我不知道我可以合理地预测正确的结构将始终是完整的。上面的选择器选择的表格多于我试图隔离的表格。

所有嵌套表都没有ID或类，也没有机会将它们添加进去。升级过程不会升级客户的标记，这些标记可能会随着时间的推移而自行部署。

任何人都有任何CSS选择器魔法可以使用，假设上面的标记与浏览器填充的元素如tbody一起？

Answer 1

你错过了css中的表格。

尝试：

div#someId > table table table td:nth-child(2) > table

https://jsfiddle.net/ba52Lwkg/

#someId > table table:first-of-type td + td > table

这应该有效。

https://jsfiddle.net/dc9wdwem/

Answer 2

这适用于your fiddle中的特定HTML：

#someId>table table:nth-of-type(1) td:nth-of-type(2) table {
  background-color: red;
}

显然，如果HTML以任何方式发生变化，这可能无法发挥作用。

用于可怕的表驱动标记的CSS选择器

2 个答案: