产品需求:想在鼠标移动到“移除”的时候,“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. 一、jsp和Servlet基础理论及jstl和EL表达式用法

    1.题外话:使用JSP有近一年半的时间了,但是开发量不大.昨天部门突然让做个读取EXCLE文件,然后在前台页面进行展示.并通过点击查看按钮可以对每条明细记录进行跳转后进行详情查看,并按照页面原型进行页 ...

  2. 扩展中国剩余定理 (ExCRT)

    扩展中国剩余定理 (ExCRT) 学习笔记 预姿势: 扩展中国剩余定理和中国剩余定理半毛钱关系都没有 问题: 求解线性同余方程组: \[ f(n)=\begin{cases} x\equiv a_1\ ...

  3. ch8 高度相等的列--CSS方法

    如下图所示效果,可以使用表格实现,本文采用在CSS中实现. 标记如下: <div class="wrapper"> <div class="box&qu ...

  4. 认识python中的super函数

    需求分析 在类继承中,存在这么一种情况: class Human(object): def Move(self): print("我会走路...") class Man(Human ...

  5. Python 实现远程服务器批量执行命令

    paramiko 远程控制介绍 Python paramiko是一个相当好用的远程登录模块,采用ssh协议,可以实现linux服务器的ssh远程登录.首先来看一个简单的例子 import parami ...

  6. no-strings-attached-----攻防世界

    拿到题目到虚拟机里的查看一下 把这些十进制数字转换为16进制,然后利用python deocde 注意0 87这里需要舍弃

  7. Linux-kernel-timeline

    Linux kernel Protocol Location HTTP https://www.kernel.org/pub/ GIT https://git.kernel.org/ RSYNC rs ...

  8. Eclipse打包Android项目时用到proguard.cfg后,出现的Warning:can't find referenced class问题的解决方案

    原文地址:http://blog.csdn.net/u_xtian/article/details/7495023 这个看似简单的问题困扰了我好久了,我已经google了很多相关的信息了,但是在我看来 ...

  9. 8个最常用的Python内置函数,小白必备!

    题图:Photo by Markus Spiske on Unsplash Python给我们内置了大量功能函数,官方文档上列出了69个,有些是我们是平时开发中经常遇到的,也有一些函数很少被用到,这里 ...

  10. ORACLE添加新用户并配置权限 添加其他用户的表权限

    添加用户配置权限 1.查出表空间所在位置 ,file_name from dba_data_files order by file_id; 2.根据步骤1查出的路径.将路径替换掉并指定用户名 路径:D ...