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？

Answer 1

像SASS / LESS这样的CSS预处理器可以帮助您将子元素嵌套在父元素中。它们还允许您嵌套相对于父元素的活动元素状态，伪元素等。

有关详细信息，请参阅kickstart，然后查看sass basics guide

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

Answer 2

Vanilla CSS不支持嵌套选择器并阻止你想要的方式。正如其他答案已经暗示的那样，目前的技术水平需要使用CSS预处理器，如LESS，SASS或Stylus。接收者的问题是选择哪个预处理器。

我认为LESS的受欢迎程度已经下降，SASS现在是最受欢迎的选择。例如，Bootstrap已从LESS转移到SASS。然而，SASS在现有的vanilla HTML / CSS / Javascript项目中进行设置并非易事 - 您需要一个可以生成CSS文件的构建系统，例如：咕噜/的WebPack /等。有实时重装和所有其他花哨的新玩具。

LESS，作为CSS的超集，具有较小的学习曲线，可以作为CSS的替代品。您只需链接项目中的LESS样式表并使用浏览器中的LESS编译器：

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>

所有现有的CSS文件也都是有效的LESS文件，因此无需从CSS迁移到LESS。

SASS和Stylus比LESS提供更多功能，但需要构建系统。但是，对于严肃的项目，建议使用专用的构建系统。如果您有一个构建系统，那么您可以直接移动到SASS。 SASS的SCSS变体也与CSS兼容，但与LESS不兼容。

有没有办法根据其父级在组中设置CSS？

2 个答案: