css - 如何在 SASS 中编写带有箭头符号的嵌套 CSS 类？

Question

如何在 sass 中编写下面带箭头的 css 代码？

.membersList ul.pagination > .active > a {
    background-color: #4CAF50;
    color: white;
    border: 1px solid #4CAF50;
}

上面和下面有什么区别

CSS:

.membersList ul.pagination .active a {
    background-color: #4CAF50;
    color: white;
    border: 1px solid #4CAF50;
}

SASS:

 .membersList
{
 ul.pagination {
   .active 
   {
     a {
        background-color: #4CAF50;
        color: white;
        border: 1px solid #4CAF50;
    }
   }
 }
}

Answer 1

.membersList ul.pagination > .active > a 和 .membersList ul.pagination .active a 的区别在于，.active 在第一种情况下必须是 ul.pagination 的直接子级，在第二种情况下，它也可以更低(中间元素介于两者之间)。 a 元素也是如此。

---

例如，使用以下 HTML 结构，您可以看到不同之处:

1. 选择器 .membersList ul.pagination > .active > a
2. 选择器 .membersList ul.pagination .active a

HTML结构，匹配1+2:.membersList → ul.pagination → .active → < kbd>a

HTML结构，只匹配2:.membersList → ul.pagination → li → .active → a

HTML结构，只匹配2:.membersList → ul.pagination → li → .active → span → a

---

您也可以在 SASS 中使用箭头符号:

.membersList {
   ul.pagination {
      > .active {
         > a {
            background-color: #4CAF50;
            color: white;
            border: 1px solid #4CAF50;
         }
      }
   }
}