检查类是不是在任何祖先上的 Sass 选择器

Posted 2023-03-29

【中文标题】检查类是不是在任何祖先上的 Sass 选择器

【英文标题】：Sass selector that checks if a class is on any ancestor检查类是否在任何祖先上的 Sass 选择器

【发布时间】：2020-04-02 20:51:43

【问题描述】：

是否可以编写一个 Sass 选择器，以针对具有应用了某个类的祖先的元素？

<div class="fruit">
    <div class="tree">
        <div class="apple">
            <div class="seed">I want this to go red.</div>
        </div>
    <div>
    <div class="bush">
        <div class="raspberry">
            <div class="seed">I don't want this to go red.<div>
        </div>
    <div>
<div>

有可能写出这样的 Sass 吗？

.seed :ancestor-selector(.tree) 
    color: red;

...让“我想让它变红”真的变红了吗？

这是一支笔，您可以尝试让它发挥作用： https://codepen.io/timrhaynes/pen/xxGNppx

【参考方案1】：

是的。你可以像这样使用&：

.seed 
    .tree & 
        /** Wow! I'm seed in tree! */
        color: red;
    

您可以在Sass documentation 中阅读有关父选择器的更多信息。

【讨论】：

很遗憾，这不起作用。在这里查看笔：codepen.io/timrhaynes/pen/xxGNppx

它有效。你只是没有关闭你的div 标签。检查生成的 CSS。修正了你的错字：codepen.io/Jaxp/pen/YzXoXoj

天哪，你是对的！谢谢，这是完美的:-)

【参考方案2】：

使用＆符号在您的具体情况是可能的。

.seed 

  color: green;

  .tree & 

    color: red;

  

直接回答。我不这么认为，虽然 CSS 喜欢从根部开始思考，然后朝着“叶子”方向组织，你可能也猜到了。