您的位置:首页 > Web前端 > CSS

stylus动态改变样式

2017-10-26 23:07 585 查看
当某个链接或元素被选中时可以时,需要改变其颜色或状态,而stylus中提供&选择器,&指向父选择器,用于判断父元素达到某条件时改变状态,下面的例子中当父元素router-link有被选中(active)时,子元素改变颜色并加上下划线。

//html
<router-link tag="div" class="tab-item" to="/recommend">
<span class="tab-link"></span>
</router-link>

//css
.tab-link
padding-bottom: 5px
color: $color-text-1
&.router-link-active
.tab-link
color: $color-theme
border-bottom: 2px solid $color-theme
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  stylus css