Question

有没有办法调整类的特异性以允许使用网格系统，如本例所示？

.col3 .width1 {
    background:blue;
}
.col4 .width1 {
    background:red;
}

<div class="col4">
    <div class="width1">
        <div class="col3">
            <div class="width1">
                <p>Test</p>
            </div>
        </div>
    </div>
<div>

Seen in this FIDDLE

最内层是红色，而不是蓝色。

问题来自于使用相同的类调用将网格放入网格中。

据我所知，使用我希望网格先行的顺序编写CSS会有所帮助，但我无法保证col3和col4不会改变位置。

Answer 1

我不太确定你在寻找什么，但内部不是蓝色的原因是因为风格被.col4 .width1风格覆盖了。只需将!important应用于.col3 .width的背景，即可显示蓝色。

Check this fiddle

＆＃13;

 .col3 .width1 {
   background: blue !important;
   width: 70%;
   margin: 0 auto;
 }
 .col4 .width1 {
   background: red;
 }

＆＃13;

<div class="col4">
  <div class="width1">
    <div class="col3">
      <div class="width1">
        <p>Test</p>
      </div>
    </div>
  </div>
</div>

＆＃13;

如果这不是您想要的，请您尝试更详细地解释，我会尽力帮助您。

Answer 2

如果为每个属性使用单独的类，该怎么办？

<div class="col4">
    <div class="width1">
        <div class="col3 color_blue">
            <div class="width1">
                <p>Test</p>
            </div>
        </div>
    </div>
<div>

.color_blue是将div col13设置为蓝色的原因。

喜欢这个Fiddle

Answer 3

走了一条不同的路线，通过Sass只需动态创建我需要的所有类：

网格（大小） - 嵌段（大小）

因此它定义了网格的大小，然后使用块，该div应该占用网格大小的多少。

大小由＃x＃[x by y，逐列]

定义

所以有一个例子：.grid1x4-block1x2

然后将网格设置为1行，有4个可能的点，这个div占用1行2列的块。

CSS特异性问题 - 网格内的网格

3 个答案: