如何在另一个属性中嵌套多个css属性

Question

我将html文件作为字符串获取，我需要更改正在进行的样式以防止它更改父样式。

而不是通过每种风格并从

更改它

    .inner-div{height: 50px;}

到

    .outter-div .inner-div{height: 50px;}

在每个元素上，我想做类似

的事情

    .outter-div {
        .inner-div{height: 50px;}
        .inner-div2{height: 50px;}
    }

然而这不起作用

有没有办法让多个属性嵌套在另一个属性中，而不必在每个属性上添加父元素？

Answer 1

要做类似的事情，你必须使用CSS预处理器。

两位受欢迎的候选人是Less和Sass。

Less和Sass扩展CSS以提供额外的功能，包括嵌套多个属性的功能。然后将此Less或Sass代码输入预处理器，将其转换为浏览器可识别的标准CSS，并可作为您网站或应用程序的一部分进行部署。

Answer 2

假设所有的内部类名称都是相同的（带有'inner'），那么可以使用属性选择器来完成。像这样：

.outer-div [class^=inner] {
  height: 50px; 
}

Demo

如果不是这样，那么...... 像其他人提到的一样使用CSS预处理器。

PS：仅供记录......

CSS选择器级别4添加了:matches伪类，以便更轻松地对选择器进行分组。

语法如下所示：:matches( selector[, selector]* )

在你的情况下，它将是：

.outer-div :-matches(.inner-div, .inner-div2 ) {
        height: 50px;
}

您可以阅读更多相关信息this CSS-tricks post

<强> NB： 目前，:matches没有浏览器支持，但是：matches伪类曾在规范中称为:any，支持-moz-和-webkit - 前缀。见MDN on :any

以下是使用:any的webkit的一个工作示例：

Codepen