当前位置：凯发k8官方网 > 前端技术 > css >内容正文

css

【css 伪类】顺序 -凯发k8官方网

发布时间：2024/9/19 css 13 豆豆

凯发k8官方网收集整理的这篇文章主要介绍了【css 伪类】顺序小编觉得挺不错的,现在分享给大家,帮大家做个参考.

doctype html> <html lang="zh" > <head><meta charset="utf-8"><style>* {margin: 0;padding: 0;}body > div{word-spacing: -5px;background-color:#fff !important;}.c {width: 50%;height: auto;/*float: left;*/display: inline-block;}.c > div {margin: 10px;padding: 5px;border: 20px solid #666;width: 50px;height: 50px;}div:first-child {background-color:#0fc;}div:nth-child(2) {background-color:#cf0;}div:nth-child(3) {background-color:#cfc;}div:last-child {background-color:#3f0;}div:nth-last-child(2) {background-color:#333;}style> head> <body><div><div class="c"><div>div><div>div><div>div><div>div><div>div>div><div class="c"><div>div><div>div><div>div><div>div><div>div>div><div> body> html>

:first-child 作为第1个子元素时生效。等效的写法:nth-child(1)。
:nth-child(2) 作为第2个子元素时生效。
:nth-child(3) 作为第3个子元素时生效。
:last-child 作为最后1个子元素时生效，或者，作为倒数第1个子元素时生效。等效的写法:nth-last-child(1)。
:nth-last-child(2) 作为倒数第2个子元素时生效。

div:first-child匹配的元素：1、2、3、8
div:nth-child(2)匹配的元素：4、8、10
div:nth-child(3)匹配的元素：5、11
div:last-child匹配的元素：1、7、8、13
div:nth-last-child(2)匹配的元素：2、6、12

总结

以上是凯发k8官方网为你收集整理的【css 伪类】顺序的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。