html - 类似 Bootstrap 的网格中的 CSS 偏移量

Question

我正在尝试重新创建 Bootstrap's offset在它的桌面网格中，像 .col-md-offset-3 这样的类通过 margin-left 创建一个偏移量。

出于某种原因，在 my attempt ，此 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 不能单独工作？

Here's my 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 是 more specific比 .col-offset-8。

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

因此，.row > div 中的 margin: 10px 覆盖了 margin-left

你可以 increase the specifcity您的选择器从 .col-offset-8 到 .row .col-offset-8。 margin-left 将覆盖 margin: 10px。

Updated Example

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

物有所值，this is a nice tool用于计算特异性。