文章/答案/技术大牛

发布

社区首页 >问答首页 >相对选择器的减少模拟(&A)

问相对选择器的减少模拟(&A)
EN

Stack Overflow用户

提问于 2014-02-19 01:05:26

回答 2查看 97关注 0票数 0

以下是输出所需的内容：

.root {...}
.node {...}
.root .red .node {border-color: red;}
.root .green .node {border-color: green;}
.root .blue .node {border-color: blue;}

我希望可以这样做：

.root {
    // styles for .root
    ...
    .node {
        // styles for .node
        ...  
        .red & {border-color: red;} 
        .green & {border-color: green;} 
        .blue & {border-color: blue;} 
    }
}

但与'.root .node‘选择器匹配。

在一段代码中为.node编写样式将是非常棒的。有没有类似于&但对于局部选择器的？可能有一些“开关”允许生成相应于父类的样式。

css

less

回答 2

Stack Overflow用户

发布于 2014-02-19 01:33:30

假设&像SASS一样工作，它将插入整个选择器链到那个点，所以它的行为符合预期。您需要的内容如下所示：

.node {
    // styles for .node
    ...  
}
.root {
    // styles for .root
    ...
    .red .node {border-color: red;} 
    .green .node {border-color: green;} 
    .blue .node {border-color: blue;} 
}

票数 2

Stack Overflow用户

发布于 2014-02-20 00:22:49

如果你想保持.node代码在一起，那么你需要做一些重复的.root，如下所示：

.root {/*root only*/}
.node {
  /*node only*/
  .root .red & {border-color: red;}
  .root .green & {border-color: green;}
  .root .blue & {border-color: blue;}
}

但问题是，你真的需要这种特异性吗？换句话说，如果.node总是存在于html中的.root中，或者至少如果.root不影响.node的颜色，而不管.node是否存在于.root中，那么下面的代码也可以在不重复.root的情况下工作得很好。有时，在开发人员希望用更少的资源“嵌套”的情况下，人们可能会忘记，通过嵌套获得的选择器的附加特异性可能是多余的。

.root {/*root only*/}
.node {
  /*node only*/
  .red & {border-color: red;}
  .green & {border-color: green;}
  .blue & {border-color: blue;}
}

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/21860544

复制

相似问题

问相对选择器的减少模拟(&A)
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问相对选择器的减少模拟(&A)EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问相对选择器的减少模拟(&A)
EN