我們知道在css中有許多的選擇器，譬如：我們最常見的class選擇器、id選擇器、標籤名選擇器、群組選擇器、後代選擇器、子代選擇器、同級元素通用選擇器、相鄰兄弟選擇器、屬性選擇器以及nth家族選擇器…
今天我們主要來說一下後面幾種選擇器
後代選擇器會設定給它的子集，也會個它的「孫子」；
內部樣式只會設定給它的子級，而不會繼承給子級的子級
type="text/css">
divp
/*div>p */
style>
但我必須像個完美的小孩兒1
但我必須像個完美的小孩兒2
但我必須像個完美的小孩兒3p>
h2>
p>
但我必須像個完美的小孩兒4span>
但我必須像個完美的小孩兒5span>
但我必須像個完美的小孩兒6span>
但我必須像個完美的小孩兒7span>
但我必須像個完美的小孩兒8
但我必須像個完美的小孩兒9span>
p>
但我必須像個完美的小孩兒10span>
但我必須像個完美的小孩兒11span>
但我必須像個完美的小孩兒12span>
但我必須像個完美的小孩兒13span>
div>
body>
（2）當是子代和後代同時存在時：（效果圖如下）：
同級元素通用選擇器：是和它同級其他一系列標籤
相鄰兄弟選擇器：只會選擇和它相鄰的乙個
/*同級元素通用選擇器*/
p ~ span
/*相鄰兄弟選擇器*/
p + span
（2）當只有同級元素通用選擇器和相鄰兄弟選擇器同時存在時，效果如下圖：
屬性選擇器：是我們自己可以給我們的標籤乙個名字，然後還可以給其乙個屬性值
/*屬性選擇器*/
[alkjdal]
[alkjdal=alkjdlakjsdlkaj]
nth家族包括：
（1）：nth-child（）{}、：nth-last-child（）{}
此模擬較「寬鬆」，表示其父級元素的第幾個子標籤（包括不同類的）
（2）：nth-of-type（）{}、nth-last-of-type（）{}
此模擬較「嚴格」，表示其父級元素的第幾個子標籤（必須是同類的）
小括號中寫數字，表示第幾個子節點。
lang="en">
charset="utf-8">
documenttitle>
type="text/css">
ul ul
li li
:nth-child(3)
li:nth-last-child(2)
li:nth-of-type(6)
li:nth-last-of-type(6)
li:last-child
style>
head>
hahap>
1li>
2li>
3li>
4li>
5li>
6li>
7li>
8li>
9li>
10li>
ul>
body>
html>
（1）：nth-child（even）選中偶數行
（2）：nth-child（odd）選中奇數行
（3）：nth-child（an）選中a的倍數行
lang="en">
charset="utf-8">
documenttitle>
type="text/css">
table
td,th
tr:nth-child(even)
tr:nth-child(odd)
style>
head>
th>
th>
th>
th>
tr>
td>
td>
td>
td>
tr>
td>
td>
td>
td>
tr>
td>
td>
td>
td>
tr>
td>
td>
td>
td>
tr>
table>
div>
body>
html>
加上**
tr
:nth-child(2n)
好了，今天就到這吧！
屬性選擇器，偽類選擇器，偽元素選擇器
屬性選擇器 1doctype html 2 html lang en 3 head 4 meta charset utf 8 5 title 屬性選擇器 title 6 style 7 屬性匹配 8 label for 12 屬性名匹配 13 label for pwd 17 以什麼結尾匹配 18 ...
偽類選擇器和偽元素選擇器簡單理解
元素選擇器 如上面的p 實實在在的存在的元素。偽元素選擇器 dom中不存在的元素，僅僅是css中用來渲染，新增一些特殊效果的，比如p before，選擇p標籤 真元素 前面的假元素 偽元素，p標籤前面沒有元素，只是假設有 類選擇器 真實有的類，我們自己正兒八經定義的類，如p.test1，選擇p標籤 ...
偽類選擇器
作用根據連線的不同狀態可以以不同的方式顯示 偽類是css 用於向某些選擇器新增特殊的效果。a標籤中有四個 link visited hover active 用法示例 a link 未訪問的連線 顏色可以自定義 a visited 已訪問的連線 hover 滑鼠移動到連線上時顯示的效果 a acti...