html伪类样式&伪类元素使用记录

伪类样式就是配置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>