产品需求:想在鼠标移动到“移除”的时候,“1.产品匹配测试”添加下划线和更改字体颜色

需求分析:从需求可以看出使用 :hover 就可以解决的问题,但是在实践中发现兄弟选择器(+)不好使,(+)只能是之后的,那如果想要访问当前元素(假设为a)的前一个节点(假设为b)就不能了

解决思路:对于相邻节点少的情况下可以将节点书写顺序颠倒(就是将a与b的位置换一下),然后在有排序就好啦,相关代码如下:

<style>
.history-desc{
height: 25px;
line-height: 25px;
font-size: 13px;
cursor: pointer;
text-indent: 26px;
color: #666;
}
.history-desc>div{
float: right;
}
.history-remove:hover + .history-name{
text-decoration: underline;
color: #333;
}
</style> <div class="history-desc">
<div class="history-remove">移除</div>
<div class="history-name">1.产品匹配测试</div>
</div>

css设置兄弟节点的样式(相邻的前一个节点)的更多相关文章

  1. css设置滚动条颜色与样式以及如何去掉与隐藏滚动条

    我们大家在浏览网页的时偶尔会看到很漂亮的各种颜色样式的滚动条,这就是通过css代码控制来实现的,于是本人搜集整理一番,这里和大家分享一下使用CSS设置滚动条颜色以及如何去掉滚动条的方法,需要的朋友可以 ...

  2. css设置兼容的透明样式

    css设置透明并实现兼容: <style>div{ filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; o ...

  3. CSS - 设置 select 元素的样式

    注意:option 外面有个框,这个框不同浏览器生成的还不一样,给这个框设置样式的方法也没有找到(有说法是这是浏览器创建的 shadow dom 没法设置).所以要想完全控制还是用列表进行模拟比较好. ...

  4. css设置网页文本选中样式

    网页的默认的文本选中颜色是蓝底白字(大多应该是吧),这个样子: 感觉并不是特别好看,可以通过CSS3的一个特性,一个CSS3的伪类选择器::selection来设置文本被选中时的状态,比如本博客的主题 ...

  5. html网页什么样的字体最好看,css设置各种中文字体样式代码

    css代码如下:{ font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,Mi ...

  6. css设置点击态样式

    .rightMenu:active { background-color: rgba(46, 103, 222, 0.13); }

  7. CSS设置input placeholder文本的样式

    placeholder是HTML5  input的新属性,英文意思是占位符,它一般表示input输入框的默认提示值. 下面是设置placeholder的文本样式的选择器的示例: /* webkit 浏 ...

  8. 详解CSS设置默认字体样式

    浏览器默认的样式往往在不同的浏览器.不同的语言版本甚至不同的系统版本都有不同的设置,这就导致如 果直接利用默认样式的页面在各个浏览器下显示非常不一致,于是就有了类似YUI的reset之类用来尽量重写浏 ...

  9. CSS 子节点继承父节点(祖先节点)的样式

    CSS 有些属性可以让子节点从父节点或祖先节点继承,文本.字体.列表属性等样式都可以被子节点继承.子节点没有自身的样式,子节点将继承父节点或祖先节点的样式. <ul class="co ...

随机推荐

  1. Python2 和 Python3 编码问题

    基本存储单元 位(bit, b):二进制数中的一个数位,可以是0或者1,是计算机中数据的最小单位. 字节(Byte,B):计算机中数据的基本单位,每8位组成一个字节. 1B = 8b 各种信息在计算机 ...

  2. 第3节 sqoop:4、sqoop的数据导入之导入数据到hdfs和导入数据到hive表

    注意: (1)\001 是hive当中默认使用的分隔符,这个玩意儿是一个asc 码值,键盘上面打不出来 (2)linux中一行写不下,可以末尾加上 一些空格和 “ \ ”,换行继续写余下的命令: bi ...

  3. 编程题:求单链表倒数第k位的值(最后一位为倒数第0位)好未来

    #!/usr/bin/env python class Node(object): def __init__(self,elem,next_=None): self.elem = elem self. ...

  4. Aop配置时候的一些问题

    编写切面,并在ApplicationContest.xml 中相关AOP及切面的配置完全正确的情况下,运行报错如下: Exception in thread "main" org. ...

  5. VUE - 路由跳转时设置动画效果

    /* 为对应的路由跳转时设置动画效果 */   <transition name="fade">         <router-view />     & ...

  6. docker学习笔记-03:docker的镜像原理

    镜像是一种轻量级.可执行的独立软件包,用来打包软件运行环境和基于运行环境开发的软件.它包含运行某个环境所需的所有内容,包括代码.库.环境变量和配置文件. 一.镜像是什么 (一).联合文件系统(Unio ...

  7. springboot学习3事务控制

    springboot学习3事务控制 spring的事务控制本质上是通过aop实现的. 在springboot中使用时,可以通过注解@Transactional进行类或者方法级别的事务控制,也可以自己通 ...

  8. Day6 - I - Sticks Problem POJ - 2452

    Xuanxuan has n sticks of different length. One day, she puts all her sticks in a line, represented b ...

  9. 008.Oracle数据库 , 判断字段内容是否为空

    /*Oracle数据库查询日期在两者之间*/ SELECT PKID, OCCUR_DATE, ATA FROM LM_FAULT WHERE ( ( OCCUR_DATE >= to_date ...

  10. 《YouTube 网站的架构演进》阅读笔记

    概述 YouTube 在国内是个404网站,需要翻墙得见,这是有用的废话,先铺垫一下. 从全球网站来看,它仅次于母公司 Google,全球排名位列第2.每天超过5亿以上视频播放量,平均每个用户点击10 ...