阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Sass 父选择器的标识符&

      一般情况下,sass在解开一个嵌套规则时就会把父选择器(#content)通过一个空格连接到子选择器的前边(articleaside)形成(#content article#content aside)。这种在CSS里边被称为后代选择器,因为它选择ID为content的元素内所有命中选择器articleaside的元素。但在有些情况下你却不会希望sass使用这种后代选择器的方式生成这种连接。

      最常见的一种情况是当你为链接之类的元素写:hover这种伪类时,你并不希望以后代选择器的方式连接。比如说,下面这种情况sass就无法正常工作:

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

      这意味着color: red这条规则将会被应用到选择器article a :hoverarticle元素内链接的所有子元素在被hover时都会变成红色。这是不正确的!你想把这条规则应用到超链接自身,而后代选择器的方式无法帮你实现。

      解决之道为使用一个特殊的sass选择器,即父选择器。在使用嵌套规则时,父选择器能对于嵌套规则如何解开提供更好的控制。它就是一个简单的&符号,且可以放在任何一个选择器可出现的地方,比如h1放在哪,它就可以放在哪。

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

      当包含父选择器标识符的嵌套规则被打开时,它不会像后代选择器那样进行拼接,而是&被父选择器直接替换:

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

      在为父级选择器添加:hover等伪类时,这种方式非常有用。同时父选择器标识符还有另外一种用法,你可以在父选择器之前添加选择器。举例来说,当用户在使用IE浏览器时,你会通过JavaScript在标签上添加一个ie的类名,为这种情况编写特殊的样式如下:

      #content aside {
        color: red;
        body.ie & { color: green }
      }
      
      /*编译后*/
      #content aside {color: red};
      body.ie #content aside { color: green }
      

      sass在选择器嵌套上是非常智能的,即使是带有父选择器的情况。当sass遇到群组选择器(由多个逗号分隔开的选择器形成)也能完美地处理这种嵌套。

      目录
      本文目录
      目录