在LESS中,我可以应用以下两个规则来影响链接的文本样式,以隐藏下划线,除非鼠标悬停:
.read-more
{
a
{
text-decoration:none;
}
a:hover
{
text-decoration:hover;
}
}
但是我觉得我也应该能够像这样定义两个规则:
.reverseHover
{
text-decoration:none;
}
.reverseHover:hover
{
text-decoration:hover;
}
然后使用mixin
来获得两个规则:
.read-more{
a
{
.reverseHover;
}
}
无需显式地执行如下操作:
.read-more{
a{
.reverseHover;
}
a.reverseHover:hover
{
.reverseHover;
}
}
这可能吗?
您可以使用&
引用父选择器。你甚至可以在mixin中使用父选择器。文档可在lesscss.org找到。解决方案如下:
.reverseHover {
text-decoration:none;
&:hover { text-decoration:underline; }
}
.read-more
{
a
{
.reverseHover
}
}