標籤：輸入 code .com har 需要 nbsp 焦點 背景顏色 測試
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>
CSS3進階選取器
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
