2

在 twitter bootstrap 中，我最近遇到了这些类型的选择

[class*="span"],
.uneditable-input[class*="span"],
.row-fluid [class*="span"] {
    float: none;
    display: block;
    width: 100%;
    margin-left: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

我知道这[class*="span"]意味着每个元素都有一个类名，其中包含“span”，并且我熟悉 css 的其余部分。

但是为什么我们还要选择.row-fluid [class*="span"]when [class*="span"]works on.row [class*="span"]呢？

我删除了这部分（因为我认为它是多余的），但如果它们在元素内，浏览器似乎不会选择具有 span 类名称的.row-fluid元素。有人可以解释这种行为吗？

4

1 回答 1

1

感谢 David Taiaroa（请参阅问题下方的评论和他的信息链接），发生这种情况的原因是选择器规范优先级。我认为稍后定义的属性将覆盖先前的属性，但事实证明，更具体的选择器将覆盖更通用的选择器，无论放置在哪里。

在这种情况下.row-fluid span1，.row-fluid span2已经特别选择了 etc，以便在各个地方的引导程序中设置它们的宽度。因此[class*="span"]无法覆盖它们，因为它是更通用的选择器。这就是我们.row-fluid [class*="span"]选择这些元素所需的方式。

于 2013-08-03T20:55:48.730 回答