版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
伪类样式就是配置dom事件发生后的样式
:link 设置链接未被访问样式
:visited 设置链接已被访问样式
:active 设置链接点击时到鼠标松开时样式
:focus 设置链接焦点在上时样式
:hover 设置鼠标悬浮样式
<style>a:hover {color: red;}</style>
<a>悬浮变红色</a>
hover失效
使用js设置css会在此元素的style属性中设置值 在hover中使用!important可解决覆盖问题
样式优先级!important>style>css伪类>id>class
伪类元素就是额外的dom且不受js控制 可以当作普通dom使用 注意content: ''
必写 无内容使用''
.colCls:after {
content: '';
height: 5px;
margin: 0 auto;
width: 20%;
position: relative;
bottom: -50%;
background-color: #e61673;
display: block;
}
一个元素悬浮改变另一个元素的样式 目前css3版本(2019年8月)不具备父级选择
<style>
/* 两者关系为父和子孙 */
.class-b:hover .class-c {
...
}
/* 两者为父子关系 */
.class-b:hover>.class-c {
...
}
/* 两者为兄弟关系 必须有相同的父节点 且之间不能有任何其他标签 */
.class-a:hover + .class-a{
...
}
/* 两者关系为兄弟和的兄弟子元素 */
.class-a:hover + .class-b > .class-b{
...
}
</style>
<div class="class-a"></div>
<div class="class-b">
<div class="class-c"></div>
</div>
单个元素悬浮改变其它多个元素 使用~
选择器 官网详解
<style>
div {
width: 100px;
height: 100px;
}
.one {
background: red;
}
.two {
background: green;
}
.three {
background: blue;
}
.one:hover {
background: white;
}
/* ~用法 p~ul选择前面有<p>元素的每个<ul>元素 即选择p之后出现的所有ul
两种元素必须拥有相同的父元素 但ul不必紧随p */
.one:hover~.two {
background: white;
}
.one:hover~.three {
background: white;
}
</style>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>