Question

我的nth-child()伪元素不在处理元素。

使用SCSS编译后的CSS YET NOT ，JSFiddle就可以了。
在我的机器上，它既不适用于CSS也不适用于SCSS。
请注意.sketchBoxGame nth-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>');
        }
    }
};

我忘记了，但你可以在第n个孩子中使用（an + b）公式，如此

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

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

Answer 2

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

如果你选择带有类＆＃39; s伪元素的元素，它就像你选择了相关的div一样。

在这个例子中，你可以看到我想说的是什么;

＆＃13;

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

＆＃13;

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

＆＃13;

CSS nth-child（n）在追加jQuery

2 个答案: