nth选择器详解
先來認(rèn)識(shí)幾個(gè)常用的
- :first-child選擇某個(gè)元素的第一個(gè)子元素
- :last-child選擇某個(gè)元素的最后一個(gè)子元素
- :nth-child()選擇某個(gè)元素的一個(gè)或多個(gè)特定的子元素
- :nth-last-child()選擇某個(gè)元素的一個(gè)或多個(gè)特定的子元素，從這個(gè)元素的最后一個(gè)子元素開始算
- :nth-of-type()選擇指定的元素
- :nth-last-of-type()選擇指定的元素，從元素的最后一個(gè)開始計(jì)算
- :first-of-type選擇一個(gè)上級(jí)元素下的第一個(gè)同類子元素
- :last-of-type選擇一個(gè)上級(jí)元素的最后一個(gè)同類子元素
實(shí)例
基礎(chǔ)代碼：
<title>nth選擇器</title><style>.box1 p{background-color: red;margin-top: 20px;}</style> </head> <body><div class="box1"><p>111</p><p>222</p><p>333</p><p>444</p><p>555</p></div> </body> </html>
以下前兩個(gè)示例都是基于這個(gè)html
1. :first-child
代碼：
.box1 p:first-child{background-color: blue; }結(jié)果：
last-child與它相反，選擇的是最后一個(gè)
2. :nth-child()
代碼：
.box1 p:nth-child(2){background-color: blue; }結(jié)果：
代碼：
結(jié)果：
nth-last-child()與它相反，從最后一個(gè)開始算起
3. :nth-of-type()
下面的示例都是基于這個(gè)html
代碼：
<style>.box1 p{background-color: red;margin-top: 20px;}.box1 h1:nth-of-type(2n + 1){background-color: blue;}</style> </head> <body><div class="box1"><h1>h111</h1><h1>h222</h1><h1>h333</h1><p>111</p><p>222</p><p>333</p><p>444</p><p>555</p></div> </body> </html>結(jié)果：
代碼：
結(jié)果：
:nth-last-of-type()從最后一個(gè)算起
4. :first-of-type
代碼：
.box1 h1:first-of-type{background-color: blue; }結(jié)果：
代碼：
結(jié)果：
:last-of-type選擇最后一個(gè)
總結(jié)
- 上一篇： CentOS7中命令 ip addr 不
- 下一篇： 机器学习岗位的面试准备——总结1