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

如果您制作＆＃34; box＆＃34;使用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

Illuminate\Routing\Router

Answer 4

我认为有点JS是简化CSS的最简单方法，除非你想使用LESS / SASS。 - 如上所述，使用简短的CSS选择器没有真正的方法。

＆＃13;

(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);

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

偶数和奇数级别儿童的选择器

4 个答案: