html - 有没有办法根据其父项在组中设置 css 样式？

Question

有没有一种方法可以根据父级分组编写css，这样我就不需要一遍又一遍地重写父级的名字，例如:

.firstparent {
    .firstchild { background: red }
    .secondchild { background: orange }
    .thirdchild .grandchild { background: green }
    /* This will only affect the elements with the class name that is the child of firstparent *??
}

.secondparent {
    div { background: blue }
    .firstchild { background: black }
}

/* Right now I am writing as below */

.firstparent .firstchild { background: red }
.firstparent .secondchild { background: orange }
.firstparent .thirdchild .grandchild { background: green }

.secondparent div { background: blue }
.secondparent .firstchild { background: black }

有没有办法像我上面显示的那样编写 css，而不是一遍又一遍地重新写 parent 的名字？

Answer 1

SASS/LESS 等 CSS 预处理器可帮助您将子元素嵌套在父元素中。它们还允许您相对于父元素嵌套事件元素状态、伪元素等。

欲了解更多信息并快速启动，请查看 sass basics guide

有关详细信息，请参阅 sass reference guide .