CSS专用性，父容器对子容器进行了超限。

Question

我对正在使用的一些自定义960‘m类有点不放心。当我使用子容器时会出现问题，而子容器的列只是从主容器的列规则继承宽度。

在我看来，内部单元格(foo + bar)应该是绿色的。这意味着他们应该得到.container-6 .grid-3的规则而不是.container-8 .grid-3的规则

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

<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个不相关的规则。

小提琴

在我看来，内部单元格(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满足选择器第一部分的条件，这个规则将适用并具有更高的特异性。如果您在任何960.gs容器中嵌套.contain-6，那么它的工作方式也是相同的，超过了任何具有2类特性的样式规则。

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

Answer 2

这两种规则都有两个类，因此它们在特殊性方面是有联系的。在这种情况下，将应用css文件中的最新规则。有关进一步解释，请参见这里。

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

演示