我们可以使用:隐藏元素上的选择器吗?

时间:2015-05-14 14:16:25

标签: css-selectors

我创建了一些列表,其中包含一些显示的元素:block和rest with display:none。 试图在整个列表中应用搜索,但它从可见列表而不是完整列表中产生了集合。

那么如何在下面的整个列表中搜索,例如。

.searchable:not([data-index*=\"" + val + "\"]) {
   display: none;
}
// where val=a; since I am searching by a

当我通过以下方式应用样式时:

ajay
amit

结果是:

ajay
amit
ashish
ali

相反,预期的结果是:

{{1}}

1 个答案:

答案 0 :(得分:0)

您的.hide规则仍会隐藏符合:not([...])选择器条件的元素。

假设您的.show.hide规则看起来很......

.searchable.show {
    display: block;
}

.searchable.hide {
    display: none;
}

......与你的规则相结合......

.searchable:not([data-index*="a"]) {
   display: none;
}

...你仍然需要这样的规则来制作符合条件的隐藏物品,可见:

.hide[data-index*="a"] {
   display: block;
}

工作小提琴:http://jsfiddle.net/x5py4c5j/