Question

这是我有一些标记的简单示例：

HTML：

<input type="checkbox" name="ex1">
<input type="checkbox" name="ex2">
<ul class="reveal">
    <li><a href="#">Hi</a></li>
    <li><a href="#">Bye</a></li>
</ul>

复选框用作过滤器，用于删除带有特定标记的<li>。一切正常。我的问题是，当选中复选框并运行过滤器逻辑时，它会使用display:none删除特定的<li>，但我用来格式化的css在事后并未正确应用。例如，假设点击第一个复选框会移除第一个<li>，并且“再见”<li>是唯一剩下的。这样可以正常工作，但是我在css中定义的边框仍然存在，即使选择器不再匹配它。这是我使用的选择器：

CSS：

#columns .calendar td ul.reveal li + li {
    border-top: 1px dotted #999;
}

首先正确应用此样式，但在应用display:none并且'bye'li是唯一的li后，它仍将具有虚线边框。

我已经使用浏览器开发者控制台进行检查，这确实是应用于创建边框的唯一样式规则。

我读过display:none没有重新绘制DOM的内容，并访问一个强制浏览器重绘的变量（类似于$（'whatever'）[0] .offsetHeight）但这个似乎没有解决我的问题。

Answer 1

您选择的CSS选择器对DOM的结构感兴趣，而不是对绘制的内容感兴趣。即使在移除S1时，选择器S + S仍将适用于S2，这就是为什么它仍然是顶部边框。

鉴于你能够操作DOM，我建议删除并重新添加元素本身，或者编写一个选择器，它将遵循添加到S1的类（它也适用于display：none）。

例如：

selector:not(.hidden) + selector { [Only works in IE9+] }

或

selector.active + selector.active { [Works in IE7+] }

Answer 2

基于jQuery的解决方案

CSS规则本身不起作用，因为DOM正在操纵DOM。

您可以使用JavaScript来识别列表中剩余的第一个li元素。

例如：

$('ul.reveal li').filter(':first').addClass('first-child');

CSS规则是：

ul.reveal li {
    border-top: 1px dotted #999;
}
ul.reveal .first-child {
    border-top: none;
}

演示小提琴：http://jsfiddle.net/audetwebdesign/BXMaB/

jQuery操作会选出每个li列表中的第一个ul元素，然后应用CSS规则来了解默认情况下显示在所有li元素上的顶部边框。< / p>

除非将其绑定到文档加载事件，否则在检查复选框（事件）时，您需要应用此jQuery操作。

display：none不改变css的行为

2 个答案:

基于jQuery的解决方案