css设置兄弟节点的样式(相邻的前一个节点)
产品需求:想在鼠标移动到“移除”的时候,“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设置兄弟节点的样式(相邻的前一个节点)的更多相关文章
- css设置滚动条颜色与样式以及如何去掉与隐藏滚动条
我们大家在浏览网页的时偶尔会看到很漂亮的各种颜色样式的滚动条,这就是通过css代码控制来实现的,于是本人搜集整理一番,这里和大家分享一下使用CSS设置滚动条颜色以及如何去掉滚动条的方法,需要的朋友可以 ...
- css设置兼容的透明样式
css设置透明并实现兼容: <style>div{ filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; o ...
- CSS - 设置 select 元素的样式
注意:option 外面有个框,这个框不同浏览器生成的还不一样,给这个框设置样式的方法也没有找到(有说法是这是浏览器创建的 shadow dom 没法设置).所以要想完全控制还是用列表进行模拟比较好. ...
- css设置网页文本选中样式
网页的默认的文本选中颜色是蓝底白字(大多应该是吧),这个样子: 感觉并不是特别好看,可以通过CSS3的一个特性,一个CSS3的伪类选择器::selection来设置文本被选中时的状态,比如本博客的主题 ...
- html网页什么样的字体最好看,css设置各种中文字体样式代码
css代码如下:{ font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,Mi ...
- css设置点击态样式
.rightMenu:active { background-color: rgba(46, 103, 222, 0.13); }
- CSS设置input placeholder文本的样式
placeholder是HTML5 input的新属性,英文意思是占位符,它一般表示input输入框的默认提示值. 下面是设置placeholder的文本样式的选择器的示例: /* webkit 浏 ...
- 详解CSS设置默认字体样式
浏览器默认的样式往往在不同的浏览器.不同的语言版本甚至不同的系统版本都有不同的设置,这就导致如 果直接利用默认样式的页面在各个浏览器下显示非常不一致,于是就有了类似YUI的reset之类用来尽量重写浏 ...
- CSS 子节点继承父节点(祖先节点)的样式
CSS 有些属性可以让子节点从父节点或祖先节点继承,文本.字体.列表属性等样式都可以被子节点继承.子节点没有自身的样式,子节点将继承父节点或祖先节点的样式. <ul class="co ...
随机推荐
- springboot,dubbo,nacos,spring-cloud-alibaba的整合
最近,自去年阿里开源了dubbo2.7及一系列产品后,阿里也打造了融入spring-cloud 的生态体系,本人关注,今年阿里开源的的spring-cloud-alibaba基本孵化完成,笔者更是对这 ...
- Vue--爬坑
1.路由变化页面数据不刷新问题: 出现这种情况是因为依赖路由的params参数获取写在created生命周期里面,因为相同路由二次甚至多次加载的关系 没有达到监听,退出页面再进入另一个文章页面并不会运 ...
- MySQL更新时间
Mysql时间加减函数为date_add().date_sub()定义和用法DATE_ADD() 函数向日期添加指定的时间间隔.DATE_SUB() 函数向日期减少指定的时间间隔.语法DATE_ADD ...
- JavaScript之bind方法实现代码分析
我们来分析一下bind方法的实现代码,下图的bind方法的实现为MDN(开发者社区)中的代码. 由上图可得:bind方法实现了两个功能:绑定this和科里化.
- 阿里云服务器win2003下iis整合tomcat共享80端口
阿里云服务器win2003下iis整合tomcat共享80端口 很多机器都用tomcat跟IIS部署不同网站.最近买了阿里云的服务器.于是也想玩一下.网上百度了很多方法.但是都有缺陷说的不是很清楚.通 ...
- Sqlserver 基本面试题
一 单词解释(2分/个) 34分 Data 数据 Database 数据库 RDBMS 关系数据库管理系统 GRANT 授权 REVOKE 取消权限 DENY 拒绝权限 DECLARE 定义变量 PR ...
- hadoop-mapreduce的官方示例的测试执行方法
1.根据给出的精度参数计算 pi : hadoop jar /export/servers/hadoop-2.6.0-cdh5.14.0/share/hadoop/mapreduce/hadoop-m ...
- 我的Grunt之旅-初识gruntfile文件
时间:2018-03-06 18:23 事件:配置 gruntfile.js文件 首先,回忆一下之前的点,grunt项目下面必须有两个文件 ,第一个 package.json ,第二个 Gru ...
- Spark的任务提交和执行流程概述
1.概述 为了更好地理解调度,我们先看一下集群模式的Spark程序运行架构图,如上所示: 2.Spark中的基本概念 1.Application:表示你的程序 2.Driver:表示main函数,创建 ...
- 08 SSM整合案例(企业权限管理系统):05.SSM整合案例的基本介绍
04.AdminLTE的基本介绍 05.SSM整合案例的基本介绍 06.产品操作 07.订单操作 08.权限控制 09.用户和角色操作 10.权限关联 11.AOP日志 05.SSM整合案例的基本介绍 ...