CSS nth-child(n) 在附加 jQuery 后没有响应

Question

我的nth-child() 伪元素无法处理这些元素。

• 它在 JSFiddle 上工作得很好，带有编译的 CSSYET NOT 和 SCSS。
• 在我的机器上，它既不适用于 CSS 也不适用于 SCSS。
• 还请注意.sketchBoxGamenth-child() 根本不起作用。
• 这是否与 jQuery 在不考虑伪元素的情况下创建和填充元素有关？

这是怎么回事？

HTML：

<div id="game" class="container-fluid">
    <div class="row">
        <div class="container-sketch text-center"></div>
    </div>
</div>

CSS：

    .sketchBoxGame {
        width: 100px;
        height: 100px;
        //background-color: white;
        border: 1px solid black;
        display: inline-block;
        vertical-align: top;
        margin: 5px;
        &:nth-child(2) {
          background-color: #3c763d;
        }
      }
      .sketchBoxIcon{
        width: 100px;
        height: 100px;
        display: inline-block;
        vertical-align: top;
        margin: 5px;
        background-color: #5bc0de;
}

JS：

var main = function () {
        iconBoxes();
        gameBoxes();
    };
    //Miki - here you can determine how many boxes you want per height/width
    var gameBoxWidth = 3;
    var gameBoxHeight = 3;

    var iconBoxWidth = 3;
    var iconBoxHeight = 1;

    var containerSketch = '.container-sketch';
    var sketchBoxGame = '.sketchBoxGame';
    var sketchBoxIcon = '.sketchBoxIcon';

    var gameBoxes = function () {
        $('sketchBoxGame').remove();
        for (var i = 0; i < gameBoxHeight; i++) {
            for (var j = 0; j < gameBoxWidth; j++) {
                $(containerSketch).append('<div class="sketchBoxGame"></div>');
            }
            $(containerSketch).append('<br>');
        }
    };
    var iconBoxes = function () {
        for (var i = 0; i < iconBoxHeight; i++) {
            for (var j = 0; j < iconBoxWidth; j++) {
                $(containerSketch).append('<div class="sketchBoxIcon"></div>');
            }
            $(containerSketch).append('<br>');
        }

    };

    $(document).ready(main);

Answer 1

请注意 .sketchBoxGame nth-child() 在 全部。

那是因为没有 .sketchBoxGame 元素是第二个子元素...它们被放在 3 个 .sketchBoxIcon 元素之后。我猜你想标记每一行的第二个元素，为此，只需将一行的每个元素包装在一个容器中。

var gameBoxes = function () {
    $('sketchBoxGame').remove();
    for (var i = 0; i < gameBoxHeight; i++) {
        var $row = $(containerSketch).append('<div>');
        for (var j = 0; j < gameBoxWidth; j++) {
            $row.append('<div class="sketchBoxGame"></div>');
        }
    }
};

我忘记了，但是你可以像这样在 nth-child 中使用 (an + b) 公式

.sketchBoxGame:nth-child(4n+2) {
    background-color: #3c763d;
}

这针对每 4 个元素重复中的每个第 2 个元素。 （它是 4，因为你有 3 个 sketchBoxGame + 1 个 BR 元素。

Answer 2

当然，它与使用 JQuery 创建元素无关。都是关于 CSS 的。

如果你选择了带有类的伪元素的元素，它就像你选择了相关的div。

在这个例子中，你可以看到我想说的；

.example2:nth-child(2) {
 color: red;
}

<div class="example1">x</div>
<div class="example2">x</div>
<div class="example2">x</div>
<div class="example2">x</div>