Question

在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"] [class*="span"]上工作时选择.row [class*="span"]？

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

Answer 1

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

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

[class * =“span”]在twitter bootstrap中是否还包含.row-fluid [class * =“span”]？

1 个答案: