编辑 dom 后 CSS nth-child 的奇怪行为答案

【问题标题】：Weird behavior of CSS nth-child after editing dom编辑 dom 后 CSS nth-child 的奇怪行为
【发布时间】：2015-04-22 03:20:28
【问题描述】：

我有四个按以下顺序排列的 div 容器：

每个容器都有 CSS 类“图表多模式”样式：

.chart.multi-mode {
    width: 300px;
    height: 200px;
    margin: 0 15px 15px 0;
}

每隔一个 div 应该没有右边距，所以我使用：

.chart.multi-mode:nth-child(2n) {
    margin-right: 0px;
}

在我使用 jQuery sortable()

之前，这一切正常

当拖动一个div并按住时，jQuery添加了一个占位符，我也给了“图表多模式”类，原始对象变为绝对对象，我删除了“多模式”类。

但是 nth-Child 不关心删除类“多模式”并且仍然计算绝对 div 并且边距设置错误，请参见此处：

有什么办法吗？

【问题讨论】：

nth-child 大部分 忽略类...它的元素是指定的nth-child CSS 适用...就是这样。
@Paulie_D 这根本不是真的。
关于已编辑问题的图片 - 这不是第一个孩子...那上面的 li 怎么样？？？
@mh-itc - 查看我的第一条评论...nth-child 忽略类
nth-child doesn't respond to class 的可能重复项

标签： javascript jquery css css-selectors jquery-ui-sortable

【解决方案1】：

使用 this 否定占位符

.chart.multi-mode:not(.chart-placeholder):nth-child(2n)

【讨论】：

不应忽略图表占位符。应忽略具有绝对位置的第一个元素。我测试给它一个特殊的类（例如'toBeIgnored'）并使用 .chart:not(.toBeIgnored):nth-child(2n) 但它仍然无法正常工作！

【解决方案2】：

要选择类的第二个元素，在更改之后，您无能为力。我能想到的唯一一种选择器是从不包含该类的元素开始设置层次结构，然后使用直接前向同级选择器+ 来定位第二个：

未经测试

li:not(.chart.multi-mode) + .chart.multi-mode + .chart.multi-mode {

}

【讨论】：

【解决方案3】：

我敲出了一些可行的东西，它使用了一种不同的方法来布置盒子（见我的评论Weird behavior of CSS nth-child after editing dom）：

基本上是 Bootstrap 网格的非响应式轻型版本：

* { box-sizing: border-box; }

body {
    padding: 50px;
}

#chartlist {
    list-style: none;
    margin: 0 -8px;
    padding: 0;
    width: 600px;
}

#chartlist::after {
    content:"";
    display:table;
    clear:both;
}

.chart.multi-mode {
    float: left;
    width: 300px;
    height: 200px;
    margin-bottom: 16px;
    padding: 0 8px;
    position: relative;
}

.chart-holder {
    border: 1px solid #333;
    background: #999;
    height: 100%;
}

.chart.placeholder {
    background: rgba(255, 0, 0, 0.5);
    position: absolute;
    right: -20px;
    top: 20px;
}

<ul id="chartlist">
    <li class="chart multi-mode">
        <div class="chart-holder">Chart #1</div>
    </li>
    <li class="chart multi-mode">
        <div class="chart-holder">Chart #2</div>
    </li>
    <li class="chart multi-mode placeholder">Chart Placeholder</li>
    <li class="chart multi-mode">
        <div class="chart-holder">Chart #3</div>
    </li>
    <li class="chart multi-mode">
        <div class="chart-holder">Chart #4</div>
    </li>
</ul>

（或http://jsfiddle.net/maryisdead/vfm5d3au/）

【讨论】：

但主要问题是，每个元素都应该有“margin：0 15px 15px 0”，除了右边的元素（每秒）应该有margin-right：0;
对不起，伙计，没看到你评论。我通过为实际图表使用另一个容器来更新我的示例。没有看到任何其他解决此问题的方法。

【解决方案4】：

我用 Javascript 解决了它：

            this.$chartList.sortable({
                placeholder : "chart chart-placeholder " + chartTypeClass,
                handle : ".opt-drag",
                start : function(event, ui) {
                    ui.item.addClass('drag-state');
                    $('.multi-mode:not(.drag-state):odd').addClass('odd');
                    $('.multi-mode:not(.drag-state):even').addClass('even');
                },
                change : function(event, ui ) {
                    $('.multi-mode').removeClass('odd');
                    $('.multi-mode').removeClass('even');
                    $('.multi-mode:not(.drag-state):odd').addClass('odd');
                    $('.multi-mode:not(.drag-state):even').addClass('even');
                },
                stop : function(event, ui) {
                    ui.item.removeClass('drag-state');
                    $('.multi-mode').removeClass('odd');
                    $('.multi-mode').removeClass('even');
                },
                update : function() {
                    uiBehavior.startSpinner();
                    var newUuidOrder = [];
                    $('.chart').each(function() {
                        newUuidOrder.push($(this).attr('uuid'));
                    });
                    _this.restSetChartsOrder(newUuidOrder, function() {
                        uiBehavior.stopSpinner();
                    });
                }
            });

在开始拖动或列表更改时我计算元素并添加奇数或偶数类。

CSS 看起来像这样：

.chart.multi-mode.odd {
    margin-right: 0px !important;
}

.chart.multi-mode.even {
    margin-right: 15px !important;
}

谢谢大家！

【讨论】：