css - 为什么最后一个层次结构没有删除第一个层次结构？

Question

我的理解是，当你在一个又一个的类中添加一些 css 时，第二个将有更多的层次结构。但是，在这种情况下，第一个是应用于我的代码的那个。

#list {

    .list-over {
        margin-bottom: 20px;

        @include media($large-screens) {
            margin-bottom: 0px;
            width: 30%;//This is the one that appears (but I want to be stepped with the other that is next to the next comment)
        }
    }
}

.container {
    background-color: red;
    border: 2px solid black;
    width: 330px;
    padding-right: 0%;

    &.content{
        padding-right: 0%;
        background-color: blue;
    }

    p{
        font-style: italic;
    }

    &.list-over {

        @include media($large-screens) {
            margin-bottom: 0px;
            width: 70%;//This is the one that I’m expecting!
        }
    }
}

我也尝试应用 !important 标签，但它仍然无法按我预期的方式工作。

我需要第二个宽度(在 .list-over 内部和 .container 内部)跨过第一个宽度，但我无法删除第一个宽度。

感谢您的帮助!

Answer 1

所以您的样式不起作用可能有 3 个原因。

1. 如果缩进是任何指标，.container类不应该是 #list 的子级id，在这种情况下，您的 .list-over里面#list缺少结尾 } .

2. 注意你的 HTML 结构，它直接关系到你如何构建/定位你的 CSS，现在是第 2 个 &.list-over应该是包含 .container 的同一元素上的一个类类，像这样:<div class="container list-over"> . &在 SASS/SCSS 中加入类/类名。

3. 在某些 HTML 结构下，第二个 &.list-over没有比您在 #list 下的第一个更高的特异性.请参见下面的示例，为了使其正常工作，我必须添加 !important .

旁注:内部 #list , .list-over 可以有任意数量的包装元素.注意第 2 点，否则如果不是这种情况，则必须删除 &来自 &.list-over .您可以检查(Chrome devTools)。如果类样式应用正确，您至少可以看到它被覆盖了。

HTML 结构:

<div id="list">
    '#list' element (parent)
    <div>
        'div' element (child)
        <div class="container list-over">
            Element with 'container' and 'list-over' class (grand child)
        </div>
    </div>
</div>

SCSS:

#list {
  border: 1px solid green;

  > div { border: 1px solid orange; }

  .list-over {
    border: 1px solid blue;
  }
}

.container {
  &.list-over {
    border: 1px solid red !important;
  }
}

Working example here (我不能在 SO 上这样做，因为不确定如何包含 SCSS)。

如果这有助于您解决问题，请考虑接受此答案:)