scss里父选择器的标识符&

Jerry Wang

发布于 2020-11-05 14:24:37

9850

发布于 2020-11-05 14:24:37

一般情况下，sass在解开一个嵌套规则时就会把父选择器（#content）通过一个空格连接到子选择器的前边（article和aside）形成（#content article和#content aside）。

看个例子：

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  #content aside { background-color: #EEE }
}

编译之后：

#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

这种在CSS里边被称为后代选择器，因为它选择了ID为content的元素内所有命中选择器article和aside的子元素。

然而现实开发过程中，并不是所有的场景我们都需要这种行为。

article a {
  color: blue;
  &:hover { color: red }
}

编译后：

article a { color: blue }
article a:hover { color: red }

群组选择器

nav, aside {
  a {color: blue}
}

编译后：

nav a, aside a {color: blue}

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2020-11-03 ，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度