CSS3中添加了一些新的選擇器 與之前的不同 這些選擇器有些類似於jquery的選擇器 能夠讓我們更高的操作DOM 廢話不多說
為了更直觀的了解 我們以這段為實例 來進行操作
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <ul> 9 <li>第一個測試標題</li> 10 <li>第二個測試標題</li> 11 <li>第三個測試標題</li> 12 <li>第四個測試標題</li> 13 <li>第五個測試標題</li> 14 </ul> 15 </body> 16 </html>
:nth-of-type(n) 選擇屬於其父元素第n個元素的每個元素。
和這個類似的是 :first-of-type和:last-of-type 分別是選擇第一個元素和最后一個元素
DEMO:
<style> li:nth-of-type(3){ /*選擇第3個li元素*/ background-color: #00b3ee; } li:first-of-type{ /*選擇第一個li元素*/ background-color: #ee1200; } li:last-of-type{ /*選擇最后一個li元素*/ background-color: #00ee0f; }
</style>
:before 在元素內容前面添加內容
:after 在元素內容后面添加內容
這兩個元素類似於:hover 但是他們不是鼠標懸浮 而是利用content屬性添加內容
需要注意的是 用css添加的內容不能被選中 也不能被js獲取 顯示成
這些內容屬於css樣式類型的
DEMO:
li:before{
content: '在前面添加內容 ';
}
li:after{
content: ' 在后面添加的內容';
}
:focus 這個也類似於我們常用的:hover 用來動態選擇獲取焦點的元素
DEMO:別如獲取焦點的input框改變背景顏色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> input:focus{ background-color: #00b3ee; } </style> </head> <body> 輸入框1：<input type="text"><br> 輸入框2：<input type="text"> </body> </html>
:nth-child(n) 選取每個父元素的第n個子元素
:nth-last-child(n) 選取每個父元素從后向前數的第n個元素
:last-child 選擇每個父元素的最后一個子元素
注意 這個選擇器慎用 因為選擇面太大 不好控制
DEMO:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> :not(p){ border:solid red 1px; } </style> </head> <body> <div> <p>我是P元素</p> <p>我是P元素</p> <p>我是P元素</p> <span>我不是p元素 我是span元素</span> <p>我是P元素</p> </div> </body> </html>
