html - 如何隐藏 div 下的所有表，除了其 td 标题等于特定值的表

Question

我的SharePoint网页里面有如下代码，里面主要有一个div和里面的5个表格(表格数量以后可以增减)。

所以我想隐藏所有表格，但第一个 TR 中的第三个 TD 磁贴等于“页面”的表格除外？ 目前我写了下面的代码来隐藏除第三个表之外的所有表，但是由于表的数量可能会改变所以这会中断，所以我想通过使用标题使我的 CSS 更加动态？

#ctl00_PlaceHolderLeftNavBar_ctl02_WebTreeView > table:not(:nth-child(3)) {
    display: none;
} 

谁能给个建议？

Answer 1

这对于 CSS 目前是不可能的，因为您想要选择一个特定的元素，在本例中为 a，然后将 CSS 规则实际应用到其父元素之一。 CSS 可以(现在)仅将规则应用于实际选定的元素。

您需要 Javascript 来解决这个问题。例如，在 MooTools 中，这是可行的:

$$('div.thatYouAreTargeting table').each(function(t) {
  if(t.getElement('a[title=Pages]'))
    t.setStyle('display', 'none');
});

使用 jQuery 它同样简单，使用原生 Javascript 则稍微冗长一些。