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

Question

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

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

---

如果你很好奇，这里是样式级联的规则。