阿西河

所有教程

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

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Sass 子组合选择器和同层组合选择器:>、+和~

      上边这三个组合选择器必须和其他选择器配合使用,以指定浏览器仅选择某种特定上下文中的元素。

      article section { margin: 5px }
      article > section { border: 1px solid #ccc }
      

      你可以用子组合选择器>选择一个元素的直接子元素。上例中,第一个选择器会选择article下的所有命中section选择器的元素。第二个选择器只会选择article下紧跟着的子元素中命中section选择器的元素。

      在下例中,你可以用同层相邻组合选择器+选择header元素后紧跟的p元素:

      header + p { font-size: 1.1em }
      

      你也可以用同层全体组合选择器~,选择所有跟在article后的同层article元素,不管它们之间隔了多少其他元素:

      article ~ article { border-top: 1px dashed #ccc }
      

      这些组合选择器可以毫不费力地应用到sass的规则嵌套中。可以把它们放在外层选择器后边,或里层选择器前边:

      article {
        ~ article { border-top: 1px dashed #ccc }
        > section { background: #eee }
        dl > {
          dt { color: #333 }
          dd { color: #555 }
        }
        nav + & { margin-top: 0 }
      }
      

      sass会如你所愿地将这些嵌套规则一一解开组合在一起:

      article ~ article { border-top: 1px dashed #ccc }
      article > footer { background: #eee }
      article dl > dt { color: #333 }
      article dl > dd { color: #555 }
      nav + article { margin-top: 0 }
      

      sass中,不仅仅css规则可以嵌套,对属性进行嵌套也可以减少很多重复性的工作。

      目录
      本文目录
      目录