偶数和奇数级别子级的选择器

Question

选择偶数和奇数级别子级的正确选择器是什么？

我想简化当前的 CSS，同时允许无限级别，而无需手动为其编写 CSS。

.box {
    max-width:100%;margin:25px 0px;padding: 15px;
    border:#d1ddbd solid  2px;
    background-color:#f3fae8;
}

.box > .box {
    border:#d1ddbd solid  1px;
    background-color:#fff;
}

.box > .box > .box {
    border:#d1ddbd solid  1px;
    background-color:#f3fae8;
}

.box > .box > .box > .box {
    border:#d1ddbd solid  1px;
    background-color:#fff;
}

Answer 1

在 CSS 中没有办法做到这一点，除了坐下来编写规则。编写十个规则并降低到十个嵌套级别并不是什么大不了的事。你的选择是花更多的时间编写 JS 来添加类，或者让你的后端添加类，或者与 SASS 宏进行斗争，任何一个都会花费比这更值得的时间。

.box {
  max-width: 100%;
  margin:    25px 0px;
  padding:   15px;
  border:    #d1ddbd solid 2px;
}

.box > .box {
  border-width: 1px;
}

.box,
.box > .box > .box, 
.box > .box > .box > .box > .box, 
.box > .box > .box > .box > .box > .box > .box,
.box > .box > .box > .box > .box > .box > .box > .box > .box {
    background-color:#f3fae8;
}

.box > .box, 
.box > .box > .box > .box, 
.box > .box > .box > .box > .box > .box,
.box > .box > .box > .box > .box > .box > .box > .box,
.box > .box > .box > .box > .box > .box > .box > .box, .box > .box {
    background-color:#fff;
}

Answer 2

如果你使用 div 制作“盒子”，你可以这样做。 （请参阅下面的代码和预览）

div:nth-child(even)
{
    border:#d1ddbd solid  1px;
    background-color:#f3fae8;
    width:76px;
    height:75px;
}
div:nth-child(odd)
{
    border:#d1ddbd solid  1px;
    background-color:#fff;
    width:76px;
    height:75px;
}
#MainDiv{
    max-width:100%;margin:25px 0px;padding: 15px;
    border:#d1ddbd solid  2px;
    background-color:#f3fae8;
    display:block;
    padding:2px;
    height:auto;
}

    <div id="MainDiv">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>

Answer 3

您可以通过JavaScript轻松设置类。

取决于计划数量和适当的绩效。 （我想你不需要数千。）

此示例需要：500 8ms、5.5K 47ms、55K 446ms

/** Extending Javascript Array for function Contains */
Array.prototype.contains = function (element) {
    return this.indexOf(element) > -1;
};

/** Set class "odd" to itself and run proceedEven() on all children with class "box" */
function proceedOdd(oddItem) {
    oddItem.classList.add("odd");
    if (oddItem.children.length) {
        [].forEach.call(oddItem.children, function (child) {
            if (child.classList.contains("box")) {
                proceedEven(child);
            }
        })
    }
}

/** Set class "even" to itself and run proceedOdd() on all children with class "box" */
function proceedEven(evenItem) {
    evenItem.classList.add("even");
    if (evenItem.children.length)
        [].forEach.call(evenItem.children, function (child) {
            if (child.classList.contains("box")) {
                proceedOdd(child);
            }
        })
}

// set root having first even box as child
var root = document.querySelectorAll("body");

if (root.length) {
    // just for case more in root
    [].forEach.call(root, function (rootItem) {
        if (rootItem.children.length)
            [].forEach.call(rootItem.children, function (child) {
                // proceed first level of evens - rest done recursively
                if (child.classList.contains("box")) proceedEven(child);
            });
    })
}

Answer 4

我认为一点 JS 是简化 CSS 的最简单方法，除非你想使用 LESS/SASS。 - 正如上面已经写过的，没有真正的方法可以使用短 CSS 选择器来做到这一点。

(function addClasses(element, selector, level){
  [].forEach.call(element.querySelectorAll(selector), 
                  function (item, index) {
  		    item.className += " " + (level % 2 ? "white-bg" : "green-bg");
                    item.innerHTML += "";
                    addClasses(item, ".box", level+1);
                  }
  );
})(document, ".box", 0);

.box {
    max-width: 100%;
    margin:25px 0px;
    padding: 15px;
    border: #d1ddbd solid  2px;
}

.box.white-bg {
  background-color: #ffffff;
  border: #d1ddbd solid  1px;
}
.box.green-bg {
  background-color: #f3fae8;
  border: #d1ddbd solid  1px;
}

<div class="box">
  1
  <div class="box">1.1</div>
  <div class="box">1.2</div>
</div>

<div class="box">
  2
  <div class="box">
    2.1
    <div class="box">
      2.1.1
      <div class="box">2.1.1.1</div>
    </div>
    <div class="box">2.1.2</div>
    <div class="box">2.1.3</div>
    <div class="box">2.1.4</div>
    <div class="box">2.1.5</div>
  </div>
  <div class="box">
    2.2
  </div>
  <div class="box">
    2.3
  </div>
</div>

<div class="box">
  3
  <div class="box">3.1</div>
</div>

Answer 5

您现在可以使用容器查询来做到这一点！只花了8年时间。

基本上，您使用容器查询来定位特定样式，并在其中切换样式本身：

layering {
  container-name: layering;
  --depth-is-odd: true;
}

@container layering style(--depth-is-odd: true) {
  .layering {
   // styles for odd levels of nesting
    --depth-is-odd: false;
  }
}

@container layering style(--depth-is-odd: false) {
  .layering {
   // styles for even levels of nesting
    --depth-is-odd: true;
  }
}