結構(位置)偽類選擇器（CSS3)

:first-child :選取屬于其父元素的首個子元素的指定選擇器
:last-child :選取屬于其父元素的最后一個子元素的指定選擇器
:nth-child(n) ： 匹配屬于其父元素的第 N 個子元素，不論元素的類型
:nth-last-child(n) ：選擇器匹配屬于其元素的第 N 個子元素的每個元素，不論元素的類型，從最后一個子元素開始計數(shù)。 n 可以是數(shù)字、關鍵詞或公式​

li:first-child { /* 選擇第一個孩子 */
color: pink;
}
li:last-child { /* 最后一個孩子 */
color: purple;
}
li:nth-child(4) { /* 選擇第4個孩子 n 代表 第幾個的意思 */
color: skyblue;
}

屬性選擇器

選取標簽帶有某些特殊屬性的選擇器 我們成為屬性選擇器

/* 獲取到 擁有 該屬性的元素 */
div[class^=font] { /* class^=font 表示 font 開始位置就行了 */
color: pink;
}
div[class$=footer] { /* class$=footer 表示 footer 結束位置就行了 */
color: skyblue;
}
div[class*=tao] { /* class*=tao *= 表示tao 在任意位置都可以 */
color: green;
}
<div class="font12">屬性選擇器</div>
<div class="font12">屬性選擇器</div>
<div class="font24">屬性選擇器</div>
<div class="font24">屬性選擇器</div>
<div class="font24">屬性選擇器</div>
<div class="24font">屬性選擇器123</div>
<div class="sub-footer">屬性選擇器footer</div>
<div class="jd-footer">屬性選擇器footer</div>
<div class="news-tao-nav">屬性選擇器</div>
<div class="news-tao-header">屬性選擇器</div>
<div class="tao-header">屬性選擇器</div>
input[type=text]div[class*=tao]

偽元素選擇器（CSS3)

E::first-letter文本的第一個單詞或字（如中文、日文、韓文等）
E::first-line 文本第一行；
E::selection 可改變選中文本的樣式；

p::first-letter {
font-size: 20px;
color: hotpink;
}
/* 首行特殊樣式 */
p::first-line {
color: skyblue;
}
p::selection {
/* font-size: 50px; */
color: orange;
}

4、E::before和E::after

在E元素內部的開始位置和結束位創(chuàng)建一個元素，該元素為行內元素，且必須要結合content屬性使用。

div::befor {
content:"開始";
}
div::after {
content:"結束";
}

E:after、E:before 在舊版本里是偽元素，CSS3的規(guī)范里“:”用來表示偽類，“::”用來表示偽元素，但是在高版本瀏覽器下E:after、E:before會被自動識別為E::after、E::before，這樣做的目的是用來做兼容處理。