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

我正在使用我正在使用的一些自定义960.gs类。我使用子容器时发生问题，而子容器的列只是从主容器的列规则继承宽度。CSS的特殊性，父容器否决子容器

在我看来，内部细胞（富+酒吧）应该是绿色的。这意味着他们应该得到的.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 +吧）应该是绿色的。意思是他们应该得到.container-6 .grid-3的规则而不是.container-8 .grid-3

来源

2014-02-12 Phliplip

交换.container-6 .grid-3和.container-8 .grid-3如果你想，当它嵌套在该公司在内部容器总是王牌的环境中应用的样式任何其他容器，你可以这样写：

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

方括号内的部分是一个属性选择器。星号表示通配符，所以这部分匹配任何在其属性类中具有子字符串container-的元素。

所以在你的情况下，因为container-8满足选择器的第一部分的条件，这个规则将适用并具有更高的特异性。如果您将.container-6嵌套在任何 960.gs容器中，则它将以相同的方式工作，从而胜出任何以2级特殊性声明的样式规则。

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

来源

2014-03-05 16:25:16 Faust

你先生..太棒了！我添加了这个[fiddle]（http://jsfiddle.net/uNkj3/），它显示了这两个规则如何应用，container-6嵌套在container-8中，反之亦然。我还没有将它应用到我的应用程序中，但我很确定它会坚持下去！ – Phliplip

这两个规则都有2个类，所以它们在特异性方面是有联系的。在这种情况下，应用了css文件中的最新规则。进一步的解释请参阅here。

要将其变为绿色，你可以在CSS文件

DEMO

来源

2014-02-12 15:45:01 Sionnach733

你的解决方案适合我的具体情况，容器8内容器6的情况可能永远不会发生。因此我在我的应用程序中实现了这一点。仍在寻找更通用的解决方案。 – Phliplip

好吧，如果你想解决这个问题，你可能需要添加一些ID。当涉及到css特异性时，一个id总是会胜过一个类。 – Sionnach733

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

回答

相关问题