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个原因。

如果缩进是任何指示符，则.container类并不意味着是#list id的子代，在这种情况下，您在.list-over中的#list缺少结束语}。
照顾好HTML的结构，它直接关系到CSS的结构/目标，现在第二个&.list-over应该是包含.container类的同一元素上的类，例如：<div class="container list-over">。 &在SASS / SCSS中加入类/类名。
在某些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（由于不确定如何包含SCSS，我无法在SO上做到这一点。）

如果这可以帮助您解决问题，请考虑接受此答案：）

为什么最后一个层次结构不删除第一个层次结构？

1 个答案: