如何在SASS中使用箭头符号编写嵌套的CSS类?

时间:2017-03-13 09:42:37

标签: css sass

如何在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;
    }
   }
 }
}

1 个答案:

答案 0 :(得分:2)

.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
  3. HTML结构,匹配1 + 2 .membersList ul.pagination .active →< KBD>一

    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;
             }
          }
       }
    }