nth:child和nth-of-type的区别
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS3新增选择器nth-type-of</title> <style> ul li:first-of-type { background-color: pink; } ul li:last-of-type { background-color: pink; } ul li:nth-of-type(even) { background-color: skyblue; } /* nth-child 会把所有的盒子都排列序号 */ /* 执行的时候首先看 :nth-child(1) 之后回去看 前面 div */ section div:nth-child(1) { background-color: red; } /* nth-of-type 会把指定元素的盒子排列序号 */ /* 执行的时候首先看 div指定的元素 之后回去看 :nth-of-type(1) 第几个孩子 */ section div:nth-of-type(1) { background-color: blue; } </style> </head> <body> <ul> <li>我是第1个孩子</li> <li>我是第2个孩子</li> <li>我是第3个孩子</li> <li>我是第4个孩子</li> <li>我是第5个孩子</li> <li>我是第6个孩子</li> <li>我是第7个孩子</li> <li>我是第8个孩子</li> </ul> <!-- 区别 --> <section> <p>光头强</p> <div>熊大</div> <div>熊二</div> </section> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS3新增选择器nth-type-of</title> <style> ul li:first-of-type { background-color: pink; } ul li:last-of-type { background-color: pink; } ul li:nth-of-type(even) { background-color: skyblue; } /* nth-child 会把所有的盒子都排列序号 */ /* 执行的时候首先看 :nth-child(1) 之后回去看 前面 div */ section div:nth-child(1) { background-color: red; } /* nth-of-type 会把指定元素的盒子排列序号 */ /* 执行的时候首先看 div指定的元素 之后回去看 :nth-of-type(1) 第几个孩子 */ section div:nth-of-type(1) { background-color: blue; } </style> </head> <body> <ul> <li>我是第1个孩子</li> <li>我是第2个孩子</li> <li>我是第3个孩子</li> <li>我是第4个孩子</li> <li>我是第5个孩子</li> <li>我是第6个孩子</li> <li>我是第7个孩子</li> <li>我是第8个孩子</li> </ul> <!-- 区别 --> <section> <p>光头强</p> <div>熊大</div> <div>熊二</div> </section> </body> </html>
3. 伪元素选择器
以下是基本使用：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>伪元素选择器before和after</title> <style> div { width: 200px; height: 200px; background-color: pink; } /* div::before 权重是2 */ div::before { /* 这个content是必须要写的 */ /* display: inline-block; */ content: '我'; /* width: 30px; height: 40px; background-color: purple; */ } div::after { content: '小猪佩奇'; } </style> </head> <body> <div> 是 </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>伪元素选择器使用场景-字体图标</title> <style> @font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?1lv3na'); src: url('fonts/icomoon.eot?1lv3na#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?1lv3na') format('truetype'), url('fonts/icomoon.woff?1lv3na') format('woff'), url('fonts/icomoon.svg?1lv3na#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; } div { position: relative; width: 200px; height: 35px; border: 1px solid red; } div::after { position: absolute; top: 10px; right: 10px; font-family: 'icomoon'; /* content: ''; */ content: '\e91e'; color: red; font-size: 18px; } </style> </head> <body> <div></div> </body> </html>
