Question

我正在使用我正在使用的一些自定义960.gs类。当我使用子容器时出现问题，子容器的列只是从主容器的列规则继承宽度。

在我看来，内部细胞（foo + bar）应该是绿色的。这意味着他们应该获得.container-6 .grid-3而不是.container-8 .grid-3

的规则

我知道CSS中的!important选项，但我想先调查其他选项，因为如果情况恰好相反，这将是一个问题。

HTML

<div class="container-8">
    <div class="grid-3">
        <div class="container-6">
            <div class="grid-3 alpha">foo</div>
            <div class="grid-3 omega">bar</div>
        </div>
    </div>
    <div class="grid-5">test
    </div>
</div>

CSS

body {
  min-width: 990px;
}

div {
    padding: 5px 0;
}

.container-6 {
    margin-left: auto;
    margin-right: auto;
    border: 1px solid yellow;
    width: 684px;
}
.container-6 .grid-3 {
    width:312px;
    border: 1px solid green;
}
.container-8 {
    margin-left: auto;
    margin-right: auto;
    width: 960px;
    border: 1px solid silver;    
}
.container-8 .grid-3 {
    width:340px;
    border: 1px solid blue;    
}
.container-8 .grid-5 {
    width:580px;
    border: 1px solid red;    
}

.alpha {
    margin-left: 0 !important;
}

.omega {
    margin-right: 0 !important;
}

.grid-1,
.grid-2,
.grid-3,
.grid-4,
.grid-5,
.grid-6,
.grid-7,
.grid-8 {
    display:inline;
    float: left;
    position: relative;
}

我做了这个小提琴来说明我的问题。我已经取出了不相关的960.gs规则。

Fiddle

在我看来，内部细胞（foo + bar）应该是绿色的。这意味着他们应该获得.container-6 .grid-3而不是.container-8 .grid-3

的规则

Answer 1

如果你希望在内部容器的上下文中应用的样式在嵌套在任何其他容器中时总是特朗普，你可以这样写：

 [class*="container-"] .container-6 .grid-3{
     border: 1px solid green;
 }

方括号中的部分是属性选择器。星号表示通配符，因此该部分匹配在其类属性中任何位置具有子字符串container-的任何元素。

因此，在您的情况下，由于container-8满足选择器第一部分的条件，因此该规则将适用并具有更高的特异性。如果你将.container-6嵌套在任何 960.gs容器中，它将以同样的方式工作，胜过任何以2类特异性声明的样式规则。

警告：IE-6及更低版本不支持属性选择器。

Answer 2

这两个规则都有2个类，因此在特异性方面它们是相互关联的。在这种情况下，将应用css文件中的最新规则。有关详细说明，请参阅here。

要将其更改为绿色，您可以在CSS文件中交换.container-6 .grid-3和.container-8 .grid-3

DEMO

CSS特性，父容器否决子容器

2 个答案: