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

Question

有没有办法调整 classes 的特殊性以允许使用此示例中所示的网格系统？

.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

最里面是红色，不是蓝色。

问题来自使用相同的 class 调用将网格置于网格中。

我知道用我希望网格优先的顺序写 CSS 会有所帮助，但我不能保证 col3 和 col4 不会改变位置。

Answer 1

我不太确定你在找什么，但里面不是蓝色的原因是因为样式被 .col4 .width1 样式覆盖了。您可以通过简单地将 !important 应用到 .col3 .width.

的背景来使蓝色出现

Check this fiddle

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

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

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

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乘y，逐列]

所以会有这样的例子：.grid1x4-block1x2

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

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

CSS Specificty Issue - Grid inside Grid

html

css

grid

css-specificity