Javascript 显示：无不改变css的行为

以下是我的一些标记的简单示例：

HTML:

开始时正确应用此样式，但在

显示后：未应用任何
，并且“bye”li是唯一剩下的li，它仍然具有虚线边框

我已经使用browser developer控制台进行了检查，这确实是用于创建边框的唯一样式规则

我读过一些关于
display:none
不重新绘制DOM的内容，以及访问一个强制浏览器重新绘制的变量（比如$（'whatever'）[0]。offsetHeight）但这似乎并不能解决我的问题。
您选择的CSS选择器感兴趣的是DOM的结构，而不是绘制什么和没有绘制什么。选择器S+S仍将应用于S2，即使S1被删除，这就是为什么它仍然获得上边框

考虑到您能够操作DOM，我建议您要么删除并重新添加元素本身，要么编写一个选择器，该选择器将考虑添加到S1的类（该选择器也将display:none应用于它）

例如：

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

或

基于jQuery的解决方案
CSS规则本身不起作用，因为DOM是由JavaScript操纵的

您可以使用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;
}

演示小提琴：

jQuery操作在每个
ul
列表中挑选出第一个
li
元素，然后应用CSS规则来知道默认情况下出现在所有
li
元素上的上边框

在选中复选框（事件）时，除了将其绑定到文档加载事件之外，还需要应用此jQuery操作。
将
display
设置为“none”不会使元素从DOM中消失。它仍然是一个
元素。如果您向其添加一个类并更改
显示
，则可以使用另一个CSS规则来去除边框。@Pointy的答案为+1。）实际上，我也会将'display:none'放在该类的规则集中。同意@Pointy。重新绘制浏览器会让你大吃一惊。它的行为应该是这样的。我没有添加一个类，而是在过滤器后面更改了css:
$（'.reveal li'）.first（）.css（'borderTop'，'none'）selector.active + selector.active { [Works in IE7+] }

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

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