高級選擇器和僞元素
僞類選擇器之狀態類
：checked :checked改變的是表單被選中時的樣式
<style>
input:checked {
width: 200px;
height: 200px;/*改變按鈕的尺寸*/
}
</style>
<body>
<input type="radio" name="ch" checked>
</body>
:visited已訪問的鏈接
:hover鼠標懸停
:active鼠標按下未擡起
:focus選中時改變
<style>
a:visited {
color: yellow; /*active 等也類似*/
}
</style>
<body>
<a href="#">百度百度百度一下</a>
</body>
a:focus {
background: pink;
}
<body>
<a href="#"></a>
</body>
僞類選擇器之結果類
nth-child()既要滿足選擇前面的需求，其次要是父級中的第幾個（）中是帶n的公式，但是帶n部分必須寫在前面。
<style>
li:nth-child(3n+1) {
color: red;
}
li:nth-child(3n+2) {
color: pink;
}
li:nth-child(3n) {
color: blue;
}
</style>
<body>
<ul>
<li>00001</li>
<li>00002</li>
<li>00003</li>
<!--<div></div>-->
<li>00004</li>
<li>00005</li>
</ul>
</body>
:nth-of-type()首先要滿足選擇前面的需求，其次是在該選擇器中排序，不同於nth-child,nth-of-type的排序是對：前面的進行排序。而nth-childs是對裏面的元素進行排序。
<style>
li:nth-of-type(1) {
color: red;
}
li:nth-of-type(2) {
color: green;
}
li:nth-of-type(3) {
color: blue;
}
li:nth-of-type(4) {
color: yellow;
}
li:nth-of-type(5) {
color: pink;
}
</style>
<body>
<ul>
<li>00001</li>
<li>00002</li>
<li>00003</li>
<div></div>
<li>00004</li>
<li>00005</li>
</ul>
</body>
：first-child
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
/* 必須是第一個，且是選擇器前的結構 */
/*first-type-child 多了一個type和前面的ntn-type-child類似*/
li:first-child {
color: red;
}
</style>
</head>
<body>
<ul>
<!-- <div></div> -->
<li>00001</li>
<li>00002</li>
<li>00003</li>
<li>00004</li>
<li>00005</li>
</ul>
</body>
</html>
屬性選擇器
<title></title>
<style>
/* ~包含屬性爲XXX的元素 */
[class~="text"] {
color: pink;
}
[type~="text"] {
display: block;
width: 200px;
height: 200px;
}
/* ^屬性以XXX開頭的標籤 */
[class^="t"] {
background-color: lightblue;
}
/* $屬性以XXX結尾的標籤 */
[class$="t"] {
font-size: 30px;
}
/* *屬性包含XXX的標籤，概念比~模糊 */
[class*="t"] {
background-color: red;
}
</style>
僞元素
div::before {
/* 僞元素必須要有content，沒有內容引號內就爲空的 在內容前面添加僞元素*/
content: '';
/* 僞元素是行內的特性 */
display: block;
width: 100px;
height: 50px;
background-color: #abcdef;
}
div::after {
/* 僞元素必須要有content，沒有內容引號內就爲空的 在內容後面添加僞元素*/
content: '';
/* 僞元素是行內的特性 */
display: block;
width: 100px;
height: 50px;
background-color: red;
}
/* 僞元素用的最多的就是清除浮動，不會影響seo */
ul::after {
content: "";
display: block;
clear: both;
}
<body>
<div>
<p>123</p>
<p>123</p>
<p>123</p>
</div>
<ul>
<li>001</li>
<li>002</li>
<li>003</li>
<li>004</li>
<li>005</li>
<!-- <div></div> -->
</ul>
</body>