当某个链接或元素被选中时可以时，需要改变其颜色或状态，而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. web前端利用leaflet生成粒子风场，类似windy

    wind.js如下: $(function() { var dixing = L.tileLayer.chinaProvider('Google.Satellite.Map', { maxZoom: ...

  2. [转载]基于UML的需求分析和系统设计（完整案例和UML图形演示）

    小序: 从学生时代就接触到UML,几年的工作中也没少使用,各种图形的概念.图形的元素和属性,以及图形的画法都不能说不熟悉.但是怎样在实际中有效地使用UML使之发挥应有的作用,怎样捕捉用户心中的需求并转 ...

  3. 大数据学习路线：Hadoop集群同步技术分享

    今天给大家带来的技术分享是——Hadoop集群同步. 一.同步方式 选择一个机器,作为时间服务器(这里选择hadoop01),所有的机器与这台集群时间进行定时的同步,比如,每隔十分钟,同步一次时间. ...

  4. 使用Selenium+firefox抓取网页指定firefox_profile后的问题

    from: https://blog.csdn.net/chufazhe/article/details/51145834 摘要:在使用selenium和firefox抓取网页指定firefox_pr ...

  5. WINDOW 安装ImageMagick服务端和PHP的imagick插件

    写在最前: windows下要注意的就是ImageMagick版本要与php扩展的Imagick能对应上,同时Imagick版本的选择也要与服务器环境以及php的情况对应上,不然就容易安装失败,我就是 ...

  6. Linux 添加网卡

    Linux 添加网卡 1.写入网卡配置 vim /etc/sysconfig/network-scripts/ifcfg-eth1 # 网卡名字 DEVICE=eth1 # 网卡类型 TYPE=Eth ...

  7. UUID实现之一twitter的分布式自增IDsnowflake算法

    Twitter的分布式自增ID算法snowflake (Java版)   概述 分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点 ...

  8. eclipse maven jar工程导出项目依赖的jar包

    今天遇到个事,给业务开发/测试搞个了转换工具,是使用swing写的,依赖了很多的三方包,为了方便打算以bat方式提供,但是要导出依赖的三方jar,网上搜了下,如下(已测试): 一.导出到默认目录 ta ...

  9. shell脚本一键安装redis

    支持识别离线包和联网安装,自动修改使用后台运行模式,离线安装的方法是,将离线包和脚本放在同一个文件夹, 它会先识别有没有离线包, 有离线包就先安装离线包, 没有离线包就安装进行判断机器是否能联网, 能 ...

  10. python简说（二十二）写日志

    分四个级别 import nnloglog = nnlog.Logger('book_server.log') log.debug('xxx值是什么')log.info('调用了什么xxx')log. ...