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>