结构伪类选择器

结构伪类选择器 first-child nth-child(n) 里面可以是数字 可以是even(偶数) odd(奇数） 也可以是式子如 -n+5 表示前五个 last-child 用法与上面基本一样 但是 nth-of-type会先去查看前面指定的元素 再去看目标是排在第几个 nth-of-type(1)

例

/* 选择ul里面的第1个li */ ul li:first-child { background: blue; } /* 选择ul里面的最后1个li */ ul li:last-child { background: purple; } /* 选择ul里面的第2个li */ ul li:nth-child(2) { background-color: red; } //注意冒号前面不要打空格

输出：

例

//偶数 ul li:nth-child(even) { background-color: red; } //奇数 ul li:nth-child(odd) { background-color: blue; }

输出 例

/* 用式子表示前五个 */ ul li:nth-child(-n+5) { background-color: red; }

输出

例

ul li:nth-of-type(odd) { background-color: red; }

输出

记得冒号前不要打空格

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。