时间戳

首页 > 解决方案 > 如何在 SCSS 中使用类名定位标签

css - 如何在 SCSS 中使用类名定位标签

问题描述

我有一个 HTML 元素如下

<a class="button">Click</a>

在我的 .scss 文件中，我有以下代码。

.button{
  & a{
    color:red;
    
    &:hover,
    &:visited{
      color:blue;
    }
  }
}

上面的代码不起作用。

我尝试搜索诸如“使用 css 定位兄弟类”之类的术语，但结果显示了如下所示的场景。

<a>
  <span class="button">Click</span>
</a>

如何a使用按钮类定位标签？

更新 ：

我不是要针对父元素。我需要定位使用特定类的元素。

标签： csssass

解决方案

标记名称后跟选择器（类或 id）名称，如a.class_name,div.class_name或a#class_name,div#class_name 

div.button{  /* tag name followed by selector(class or id) name*/)
  &>a{ /*will select only direct '<a> tags' inside div.button */
    color:red;
    
    &:hover,
    &:visited{
      color:blue;
    }
  }
}


div.button{  /* tag name followed by selector(class or id) name*/)
  & a{ /*will select only all '<a> tags' inside div.button */
    color:red;
    
    &:hover,
    &:visited{
      color:blue;
    }
  }
}

div.button{  /* tag name followed by selector(class or id) name*/)
  & a.link{ /*will select only '<a> tags with classname link' inside div.button */
    color:red;
    
    &:hover,
    &:visited{
      color:blue;
    }
  }
}
<div class="button"><a class="link" href=""></a></div>

推荐阅读