Question

选择哪位选择哪位选择哪位孩子?

我想简化我目前的特别安全局,同时允许在特别安全局中为它们编写无体力的书面材料。

.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

除了坐下来起草规则外,在特别安全局内无法做到这一点。这不是说大事来写十条规则,把你降为十条nes。你们的替代办法是花更多的时间撰写联合材料,增加课堂,或增加班级,或与南安会的宏观作战,其中任何时间都比这更重要。

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

You本可以很容易地安排课堂。

Depends on planed amount and appropriate performance. (I presume you don t need thousands.)

例如: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

我认为,除非你使用LESS/SASS.——正如上文已经写过的那样,没有与CSS的短期挑选者一道这样做的真正方法,否则简化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年时间。

基本上,你使用集装箱盘点来瞄准一种特定风格,并在箱子内 to住风格:

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

友情链接