引导样网格中的CSS偏移量

Question

我试图在桌面网格中重新创建自举偏移量，通过.col-md-offset-3这样的类通过margin-left创建偏移量。

由于某些原因，在我的尝试中，这个CSS选择器失败(即div不偏移)：

.col-offset-8 {margin-left ... }

但这两种方法都成功了：

div.col-offset-8 {margin-left ... }

col-4.col-offset-8 {margin-left ... } /*note: multiple class selectors, no space */

为什么.col-offset-8本身不能工作？

这是我的CodePen。

​

@media all and (min-width:760px) {
  .row {margin:0 auto;overflow:hidden;}
  .row > div {margin:10px;overflow:hidden;float:left;display:inline-block;}
  .row {width:960px;}
  .col-8 {width:620px} .col-4 {width:300px}
  .col-12 {width:940px} .col-6 {width:460px}
  .col-offset-8 {
    margin-left:650px; /* = col-8 + margins */
  }
}

/* for demo */
.row {background:#ccc}
.row > div {background:#eee; outline:1px solid #444}
p {font:24px/60px Arial;color:#000;text-align:center}

<div class="row">
  <div class="col-12">
    <p>col-12</p>
  </div>
</div>

<div class="row">
  <div class="col-4 col-offset-8">
    <p>col-4 offset-8</p>
  </div>
</div>

<div class="row">
  <div class="col-8">
    <p>col-8</p>
  </div>
  <div class="col-4">
    <p>col-4</p>
  </div>
</div>

<div class="row">
  <div class="col-12">
    <p>col-12</p>
  </div>
</div>

​

Answer 1

它不能工作，因为选择器.row > div是更具体而不是.col-offset-8。

更准确地说，.row > div的特定值为11，而.col-offset-8的值为10。

因此，来自.row > div的.row > div正在覆盖margin-left。

您可以将选择器的增加具体城市从.col-offset-8到.row .col-offset-8。在对margin-left所做的操作中将覆盖margin: 10px。

更新的例子

.row .col-offset-8 {
  margin-left: 650px; /* = col-8 + margins */
}

至于它的价值，这是一个很好的工具用于计算特异性。