当某个链接或元素被选中时可以时，需要改变其颜色或状态，而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: #fff

&.router-link-active

  .tab-link

      color: #000

      border-bottom: 2px solid #000
原文链接：https://blog.csdn.net/tjzc1352640/article/details/78359863

CSS--点击改变样式的更多相关文章

  1. vue列表渲染，以及鼠标点击改变样式的问题

    在实际项目中,我们进场会遇到鼠标点击该表某个DOM元素的样式,在原生的js或者jquery中,我们会比较熟练的实现这个需求,但是在vue中怎么实现呢? 直接操作DOM?NO!NO! 既然我们的项目使用 ...

  2. sencha touch 扩展篇之使用sass自定义主题样式 （下）通过css修改官方组件样式以及自定义图标

    上一讲我们讲解了如何使用官方的api来修改主题样式,这讲我们继续讲解sass的样式修改, 编译官方自带的主题包  在生成的项目以及官方sdk的目录下,自带了一些主题sass包,我们也可以通过修改sas ...

  3. css:hover状态改变另一个元素样式的使用

    效果演示 css:hover状态改变另一个元素样式的使用 .box { width: 150px; height: 150px; background-color: #069; line-height ...

  4. vue点击时动态改变样式 ------- 最简单的方法

    vue点击时动态改变样式 template中 <li :class="{ active:index==isActive }" @click="changeValue ...

  5. 一款基于jquery的下拉点击改变背景图片

    今天给大家介绍一款基于jquery的下拉点击改变背景图片.单击右上角的图片,下拉显示可选择的背景图片,单击图片变为背景图.效果图下: 在线预览   源码下载 实现的代码. html代码: <a ...

  6. css入门二-常用样式

    css入门二-常用样式总结 基本标签样式 背景色background-color 高度height; 宽度width; 边框对齐以及详细设定举例 width/*宽度*/: 80%; height/*高 ...

  7. 【CSS学习】--- 字体样式

    一.前言 CSS字体属性可以定义文本的字体系列.大小.加粗.颜色.风格(如斜体)和变形(如小型大写字母). CSS的字体属性: font-family 设置字体系列 font-size 设置字体的尺寸 ...

  8. 【CSS学习】--- 文本样式

    一.前言 CSS文本属性可以定义文本的外观.通过文本属性,可以定义文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进,等等. CSS常用的文本属性目录: text-align 文本对齐属性 te ...

  9. angular ng-repeat点击切换样式，浅谈track by $index

    前言 angular ng-repeat点击切换样式,ng-repeat点击切换class样式,巧用ng-repeat track by $index. 1.问题 一个ul包含多个li,li通过ng- ...

随机推荐

  1. jenkins2

    创建工程 Eclipse创建工程:注意工程的路径,不是/home/svn,这个是svn的根目录. 是工程上传的路径,Apple直接下面有pom文件. 创建工程,创建一个任务就是创建一个工程. 需要注意 ...

  2. Codeforces 268B - Buttons

    Manao is trying to open a rather challenging lock. The lock has n buttons on it and to open it, you ...

  3. Step4：SQL Server 跨网段（跨机房）复制

    一.本文所涉及的内容(Contents) 本文所涉及的内容(Contents) 背景(Contexts) 解决方案(Solution) 搭建过程(Process) 注意事项(Attention) 参考 ...

  4. sqlite3增删改查简单封装

    import sqlite3 class DBTool(object): def __init__(self): """ 初始化函数,创建数据库连接 "&quo ...

  5. 哪些个在 Sublime Text 下，"任性的" 好插件!

    我在sublime里面安装了以下有利于项目开发高效的插件: 1:SVN             源代码版本控制 2:LiveReload   浏览器实时刷新 3:jsMinifier     压缩 j ...

  6. es数据迁移脚本(python)

    #!/usr/bin/python # -*- coding: UTF-8 -*- # 文件名:indiceCreate.py import sys import base64 import time ...

  7. JavaBean的getters和setters方法自动生成

    xgClass.java文件: public class XgClass { private String ccCityDerate1000Num; } 添加getter/setter方法: 在代码区 ...

  8. alloc_skb申请函数分析

    alloc_skb()用于分配缓冲区的函数.由于"数据缓冲区"和"缓冲区的描述结构"(sk_buff结构)是两种不同的实体,这就意味着,在分配一个缓冲区时,需要 ...

  9. tftp 传输文件

    tftp 服务方便文件传输,但是没有理清的话,容易传输错误. -g 表示下载文件 (get) -p 表示上传文件 (put)-l 表示本地文件名 (local file) -r 表示远程主机的文件名 ...

  10. bzoj 4591 超能粒子炮·改 - Lucas

    Description 曾经发明了脑洞治疗仪&超能粒子炮的发明家SHTSC又公开了他的新发明:超能粒子炮·改--一种可以发射威力更加 强大的粒子流的神秘装置.超能粒子炮·改相比超能粒子炮,在威 ...