【CSS 伪类】顺序
生活随笔
收集整理的這篇文章主要介紹了
【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
總結
以上是生活随笔為你收集整理的【CSS 伪类】顺序的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 9款功能强大的电脑软件9款功能强大的电脑
- 下一篇： jquery获取元素宽高