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>

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

CSS如何处理特异性绑定？

1 个答案: