css - CSS 如何处理特异性关系？

Question

考虑一个 <div class="well well-large well-small" />使用来自 twitter bootstrap 的以下样式 https://github.com/twitter/bootstrap/blob/master/less/wells.less

 // Base class
.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: @wellBackground;
  border: 1px solid darken(@wellBackground, 7%);
  .border-radius(@baseBorderRadius);
  .box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
  blockquote {
    border-color: #ddd;
    border-color: rgba(0,0,0,.15);
  }
}

// Sizes
.well-large {
  padding: 24px;
  .border-radius(@borderRadiusLarge);
}
.well-small {
  padding: 9px;
  .border-radius(@borderRadiusSmall);
}

CSS 如何决定在这种情况下应用哪些填充？它会是 19px、24px、9px 还是未定义的值？我对特异性的理解是初步的，在这种情况下，.well .well-large and .well-small 之间似乎存在特异性关系。

Answer 1

如果特异性相同，则按定义顺序应用。

例子:

.a {
    color: red;
}
.b {
    color: blue;
}

---

<span class="a b">this is blue</span>
<span class="b a">this is blue</span>

---

如果你好奇，here是样式级联的规则。