如何在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;
}
}
}
}
答案 0 :(得分:2)
.membersList ul.pagination > .active > a
和.membersList ul.pagination .active a
之间的区别在于,.active
必须在第一种情况下是ul.pagination
的直接子项,在第二种情况下,它可以是也更低(中间的元素)。 a
元素也是如此。
例如,使用以下HTML结构,您可以看到差异:
.membersList ul.pagination > .active > a
.membersList ul.pagination .active a
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;
}
}
}
}