当某个链接或元素被选中时可以时，需要改变其颜色或状态，而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. make: *** /lib/modules/3.10.0-327.el7.x86_64/build: 没有那个文件或目录。 停止。

    1.问题: [root@localhost]# make make -C /lib/modules/-.el7.x86_64/build M=/home/csri/poc/adore modules ...

  2. Linux 进程管理 ps、top、pstree命令

    ps命令:查看系统中正在运行的进程 ps 是用来静态地查看系统中正在运行的进程的命令.不过这个命令有些特殊,它的部分选项不能加入"-",比如命令"ps aux" ...

  3. mac shell终端编辑命令行快捷键——行首，行尾

    Ctrl + d        删除一个字符,相当于通常的Delete键(命令行若无所有字符,则相当于exit:处理多行标准输入时也表示eof) Ctrl + h        退格删除一个字符,相当 ...

  4. Django框架----分页器（paginator）

    Django的分页器(paginator) view.py from django.shortcuts import render,HttpResponse # Create your views h ...

  5. Golang的数组初始化方式及for-range遍历

    package main import ( "fmt" ) func main() { ]], , } //定义并初始化长度为3的数组 fmt.Println(arr1) //[1 ...

  6. P2221 [HAOI2012]高速公路（线段树）

    P2221 [HAOI2012]高速公路 显然答案为 $\dfrac{\sum_{i=l}^r\sum_{j=l}^{r}dis[i][j]}{C_{r-l+1}^2}$ 下面倒是挺好算,组合数瞎搞 ...

  7. ERROR 1526 (HY000): Table has no partition for value xxx

    最近,我们有些功能需要使用到基于多个字段的分区,需要同时支持oracle/mysql,但是开发人员又希望尽可能少的改动业务代码,也不愿意使用多列分区,在oracle 11g之前,不支持多列分区(12. ...

  8. mysql/mariadb应该使用utf8mb4而不是utf8

    详情参考https://mp.weixin.qq.com/s?__biz=MzIwMzg1ODcwMw==&mid=2247487968&idx=1&sn=2ff7b511f6 ...

  9. 安装kali linux 2017.1 【一、更新源 升级软件和内核等】

    呃,我这次安装是在VMware WorkStation里进行的,具体操作系统安装步骤不谈. ISO文件下载地址:https://www.kali.org/downloads/ 说下安装后的升级操作.下 ...

  10. UVa Live 3942 Remember the Word - Hash - 动态规划

    题目传送门 高速路出口I 高速路出口II 题目大意 给定若干种短串,和文本串$S$,问有多少种方式可以将短串拼成长串. 显然,你需要一个动态规划. 用$f[i]$表示拼出串$S$前$i$个字符的方案数 ...