隐藏css所有不包含{selector}的元素

Question

我有example (js-fiddle) 我想隐藏所有tbody元素，不包含元素tr元素没有类“day_label”和“隐藏” 在这个例子中，我有一天的统计数据，如果当天没有任何记录，我需要整天隐藏。

Answer 1

使用CSS （在此特定的冻结时刻）来有效地选择基于孩子的父母 - 你所要求的 - 。

你有两个三;;选项：

1. 在生成HTML（使用服务器端语言或JS）时，请使用描述子项状态的类生成父项。这样您就可以直接定位父母。

2. 使用JavaScript定位您的父级，然后计算它是否具有正确类型的子级。如果是，则应用添加所需样式的className。

3. 对于其他情况，您也可以像Abe Petrillo所说的那样 - 这是为了反转您的逻辑并且仅在找到特定选择器时启用。但是我相信这对你正在尝试做的事情不起作用，因为它涉及比实现更复杂的“条件逻辑”。

Answer 2

你想要的基本上是一个CSS父选择器（tr.hide < tbody { display: none; }​），这还不存在。 （很快！）然而，这可以通过像jQuery这样的库轻松完成：

$("tbody").each(function() {
    if ($(this).children("tr:not(.hide):not(.day_label)").length) { //Not 0
        $(this).addClass("show");
    }
});​

CSS：

tbody { display: none; }
tbody.show { display: block; }​

演示：http://jsfiddle.net/SO_AMK/RqBCY/

Answer 3

不确定您的意思，但您可以隐藏所有行，然后显示相关的行：

tbody tr { display:none; }
tbody tr.day_label { display: block; }