当某个链接或元素被选中时可以时，需要改变其颜色或状态，而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. Chrome表单自动填充如何取消(暂时可行的解决办法)

    做项目时一直遇到一个问题,那就是用chrome测试的时候页面上的表单一直会自动填充,并且伴有黄色的背景颜色,有时候感觉很方便,有时候又很想去掉. 之前也多次寻找过方法,但是网上的方法都差不多,很多都是 ...

  2. nfs共享文件搭建

    Linux NFS服务器的安装与配置详解 一.NFS服务简介  NFS是Network  File System(网络文件系统).主要功能是通过网络让不同的服务器之间可以共享文件或者目录.NFS客户端 ...

  3. MyEclipse如何配置Struts2源码的框架压缩包

    1.MyEclipse如何配置Struts2源码的框架压缩包 如本机的Struts2框架压缩包路径为:D:\MyEclipseUserLibraries\struts\struts-2.3.15.3- ...

  4. Android Camera2 预览，拍照，人脸检测并实时展现

    https://www.jianshu.com/p/5414ba2b5508 背景     最近需要做一个人脸检测并实时预览的功能.就是边检测人脸,边在预览界面上框出来.     当然本人并不是专门做 ...

  5. django后台管理--添加自定义action

    管理员动作 简单来说,Django管理员的基本工作流程是“选择一个对象,然后进行更改”.这对大多数用例都很有效. 然而当你一次性要对多个对象做相同的改变,这个流程是非常的单调乏味的. 在这些情况下,D ...

  6. centos7开放及查看端口

    centos7中的防火墙改成了firewall,使用iptables无作用,开放端口的方法如下: firewall-cmd --zone=public --add-port=80/tcp --perm ...

  7. scrapy进阶（CrawlSpider爬虫__爬取整站小说）

    # -*- coding: utf-8 -*- import scrapy,re from scrapy.linkextractors import LinkExtractor from scrapy ...

  8. Python3 解析XML 层序遍历二叉树

    Python3 解析XML 层序遍历二叉树 keyword : python3, xml, xml.dom.minidom, 层序遍历, 层次遍历, 二叉树 part1 问题描述 面对如下 XML 文 ...

  9. [内核驱动] miniFilter 内核层与应用程序通信

    转载:http://blog.csdn.net/heyabo/article/details/8721611 转载:http://www.cnblogs.com/ljinshuan/archive/2 ...

  10. topcoder srm 480 div1

    problem1 link 直接模拟即可. problem2 link 首先,网关一定是安装在client与server之间的链路上.而不会安装在client与client之间的链路上.对于一条路径c ...