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 ...
随机推荐
- shiro用ajax方式登录
用了shiro一段时间了,但是有点受不了它请求登录如果验证不通过直接跳的是loginUrl…所以我想很多人想用ajax实现shiro的登录直接在回调函数里面通过js显示出错信息吧. 今天查了一天的资料 ...
- PHP+MySQL实现在线测试答题实例
这个实例主要给大家介绍如何使用jQuery+PHP+MySQL来实现在线测试题,包括动态读取题目,答题完毕后台评分,并返回答题结果. 读取答题列表: $sql = "select * fro ...
- [转载]JDK自带的实用工具——native2ascii.exe
做Java开发的时候,常常会出现一些乱码,或者无法正确识别或读取的文件,原因是编码方式的不一致.native2ascii是sun java sdk提供的一个工具.用来将别的文本类文件(比如*.txt, ...
- 十一 JSP&EL&JSTL
1 什么是JSP? 从用户角度看待,是一个网页从程序员角度,其实是一个Java类,他继承了Servlet,所以可以直接说JSP就是一个Servlet 为什么会有JSP?html多数情况下用来显示静态内 ...
- JuJu团队1月9号工作汇报
JuJu团队1月9号工作汇报 JuJu Scrum 团队成员 今日工作 剩余任务 困难 飞飞 将示例程序打包成exe 将crossentrophy和softmax连接起来 无 婷婷 -- 完善ma ...
- Tensorflow 将训练模型保存为pd文件
前言 保存 模型有2种方法. 方法 1.使用TensorFlow模型保存函数 save = tf.train.Saver() ...... saver.save(sess,"checkpoi ...
- Ubuntu下安装 Mysql
MYSQL在ubuntu16.04下的编译安装mysql-5.6.23.tar.gz 为减少安装过程中因权限带来个各种问题,建议全程用root用户编译安装,步骤如下: 1.安装依赖文件 apt-ge ...
- shiro#springboot
1. shiro的使用围绕着securityManager,权限需要从realm中来. securityManager可以设置realm或者realms,或者通过设置authenticator来设置r ...
- Android拷贝工程不覆盖原工程的配置方法
http://www.2cto.com/kf/201203/125131.html 在Eclipse中改包名的时候选择refactor-->rename,勾选Rename subpackages ...
- redis数据导入与导出以及配置使用
最近在研究redis 遇到redis requires Ruby version >= 2.2.2问题 解决办法是 先安装rvm,再把ruby版本提升至2.3.3 1.安装curl sudo y ...