選擇器
屬性選擇器
屬性選擇器結合了正則表達式中的^開頭、$結尾、*任意位置；
例如：e[class^=“ate”];
'>'直接子元素+緊挨着的兄弟元素~後面的兄弟節點
僞元素選擇器（僞元素選中的就是元素中的文檔，並且不佔用dom結構）
::first-letter 向文本的第一個字母添加特殊樣式。
::first-line 向文本的首行添加特殊樣式。
::before 在元素之前添加內容。
::after 在元素之後添加內容。
::selection 被鼠標選取的部分
僞類選擇器
::root 根選擇器。
::not 排除選擇器。
e:empty 選擇內容是空的e元素。
e:target 錨點選中狀態的元素。
僞類子元素
e：first-child 父元素下的第一個e元素。
e：last-child。
e：nth-child（第幾個，可以填偶數奇數2n）0 2 4 6。
e；nth-last-child，從後開始。
:first-of-type 第一個子元素
:last-of-type 最後一個子元素
:nth-of-type(){} 第xxx個子元素，n代表變量自然數
:nth-last-of-type(){} 從後往前數
e：only-child 父元素內唯一的元素e
e：only-of-type 父元素內唯一的e類型元素
input分類
input:enabled 選擇每個啓用的 元素。
input:disabled 選擇每個禁用的 元素
input:checked 選擇每個被選中的 元素。
input:read-only：用於匹配設置 “readonly”（只讀） 屬性的元素（一些文本框，input框等會用到）
input:read-write：用於匹配可讀及可寫的元素.
小實例：選項卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.wrapper{
position: relative;
width: 400px;
height: 400px;
display: inline-block;
text-align: center;
}
.wrapper div{
position: absolute;
width: 400px;
height: 370px;
border: 1px solid #000;
display: none;
text-align: center;
line-height: 370px;
}
input{
height: 30px;
width: 30px;
}
.wrapper div:nth-of-type(1){
background-color: aqua;
}
.wrapper div:nth-of-type(2){
background-color: yellow;
}
.wrapper div:nth-of-type(3){
background-color: rgb(151, 36, 70);
}
input:checked + div{
display: block;
}
</style>
</head>
<body><div class="wrapper">
<input type="radio" name="ag" checked>
<div>a</div>
<input type="radio" name="ag">
<div>a</div>
<input type="radio" name="ag">
<div>a</div>
</div>
</body>
</html>