CSS基础(part20)--CSS3结构伪类选择器
生活随笔
收集整理的這篇文章主要介紹了
CSS基础(part20)--CSS3结构伪类选择器
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
學(xué)習(xí)筆記，僅供參考，有錯必究
參考自：pink老師教案
結(jié)構(gòu)偽類選擇器
屬性列表：
nth-child(n) 參數(shù)詳解：
-
注意：本質(zhì)上就是選中第幾個子元素
-
n可以是數(shù)字、關(guān)鍵字、公式
-
n如果是數(shù)字，就是選中第幾個
-
常見的關(guān)鍵字有 even 偶數(shù)、odd 奇數(shù)
-
如果是第0個元素，或者超出了元素的個數(shù)會被忽略
nth-child 和 nt-of-type 的區(qū)別：
- nth-child 選擇父元素里面的第幾個子元素，不管是何種類型
- nt-of-type 選擇指定類型的元素
- 舉個例子
示例代碼1：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>結(jié)構(gòu)偽類選擇器</title><style>ul li:first-child {background-color: pink;}ul li:last-child {background-color: deeppink;}/* nth-child(n) 我們要第幾個，n就是幾 比如我們選第8個， 我們直接寫 8就可以了 */ul li:nth-child(5) {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> </body></html>頁面：
示例代碼2：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>結(jié)構(gòu)偽類選擇器</title><style>/* even 是偶數(shù) odd 是奇數(shù) */ul li:nth-child(odd) {background-color: pink;}/* 2n 偶數(shù) 類似于 even */ul li:nth-child(2n) {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> </body></html>頁面：
示例代碼3：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>結(jié)構(gòu)偽類選擇器</title><style>div span:nth-child(3) {background-color: pink;}/* of-type 選擇指定類型的元素 */div span:first-of-type {background-color: purple;}div span:last-of-type {background-color: skyblue;}div span:nth-of-type(3) {background-color: red;}</style> </head><body><div><p>我p標(biāo)簽</p><span>我是span1</span><span>我是span2</span><span>我是span3</span><span>我是span4</span></div></body></html>頁面：
總結(jié)
以上是生活随笔為你收集整理的CSS基础(part20)--CSS3结构伪类选择器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： cad如何等比例放大
- 下一篇： CSS基础(part21)--CSS3伪