CSS专用性，父容器否决子容器

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

在我看来，内部细胞（foo+bar）应该是绿色的。这意味着他们应该获得

.container-6.grid-3

的规则，而不是

.container-8.grid-3

我知道了

！CSS中的重要

选项，但我想先研究其他选项，因为如果情况正好相反，这将是一个问题

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>

我做这把小提琴是为了说明我的问题。我已删除了与960.gs规则无关的内容

---

在我看来，内部细胞（foo+bar）应该是绿色的。这意味着他们应该获得

.container-6.grid-3

的规则，而不是

.container-8.grid-3

这两个规则都有两个类，因此在特殊性方面是并列的。在这种情况下，将应用css文件中的最新规则。有关详细说明，请参阅

要将其更改为绿色，可以在CSS文件中交换

.container-6.grid-3

和

.container-8.grid-3

---

如果您希望在内部容器的上下文中应用的样式在嵌套在任何其他容器中时始终优于其他样式，可以这样编写：

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

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

container-

的任何元素

因此，在您的情况下，由于

container-8

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

---

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

您的解决方案适合我的具体情况，在这种情况下，容器-6中包含容器-8的情况可能永远不会发生。因此，我在我的应用程序中实现了这一点。仍然在寻找一个更通用的解决方案。好的，如果你想解决这个问题，你可能需要添加一些id。当涉及到css-Specification时，id总是胜过类。。太棒了！我添加了这个，它显示了规则是如何双向应用的，其中container-6嵌套在container-8中，反之亦然。我还没有在我的应用程序中实现它，但我很确定它会坚持下去！

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