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

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;
}

我做了这个 fiddle 来说明我的问题。不相关的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 及更低版本不支持属性选择器。