資訊專欄INFORMATION COLUMN
CSS3中新增的選擇器最具代表性的就是序選擇器。
1.同級(jí)別的第幾個(gè)
1.? ? ? :first-child 選中同級(jí)別中的第一個(gè)標(biāo)簽
注意點(diǎn)：不區(qū)分類型
? ? ??
但是我們這里有一個(gè)注意點(diǎn)，如果我們?cè)诘谝粋€(gè)p之前加一個(gè)h1，則第一個(gè)p就不變紅了，因?yàn)槲覀兪沁x中同級(jí)別中的第一個(gè)標(biāo)簽，在我們這個(gè)界面中，h1，p，div是同級(jí)別的，所以第一個(gè)p不變色。
?
2.? :last-child 選中同級(jí)別中的最后一個(gè)標(biāo)簽
注意點(diǎn)：不區(qū)分類型
3.? ? :nth-child(n)? 選中同級(jí)別中的第幾個(gè)標(biāo)簽
注意點(diǎn)：不區(qū)分類型
現(xiàn)在想給我是段落7設(shè)置成紅色，我是段落7是我們同級(jí)別中的第三個(gè)，我們應(yīng)該這么寫
為什么我是段落2也變色了？因?yàn)閷?duì)于body來說，h1，3個(gè)p和div都是同級(jí)別的，所以我選中同級(jí)別的第三個(gè)就也選中了我是段落2.
4.? ? ? :nth-last-child(n) 選中同級(jí)別中的倒數(shù)第幾個(gè)標(biāo)簽
5.? ? ? ?:only-child? ? 選中父元素中唯一的元素
首先看body元素中有兩個(gè)元素，一個(gè)p，一個(gè)div，所以不是唯一元素，所以不變色，而div下只有一個(gè)p，所以變色，而如果在div下再添加一個(gè)h1標(biāo)簽，則它們都不變色了，因?yàn)閐iv下有兩個(gè)元素了，不是唯一都了
2.同類型的第幾個(gè)
1.? ? ? ?:first-of-type 選中同級(jí)別中同類型的第一個(gè)標(biāo)簽
來看下面的例子：
怎么給我是段落1 設(shè)置成紅色呢？
首先，h1，兩個(gè)p，div是同級(jí)別的，而在這個(gè)同級(jí)別中，兩個(gè)p又是同類型的，所以我是段落1就是同類型的第一個(gè)，那我們有沒有辦法取出同級(jí)別中同類型的第一個(gè)呢？就用我們下面的方法：同類型的第幾個(gè)。
2.? ? ?:last-of-type 選中同級(jí)別中同類型的最后一個(gè)標(biāo)簽
我們現(xiàn)在想讓我是段落2和我是段落5都變色，那么我們需要怎么做？
我們需要取出同級(jí)別同類型的最后一個(gè)，這個(gè)時(shí)候就取出了我是段落2和我是段落5
3.? nth-of-type(n)選中同級(jí)別中同類型的第幾個(gè)標(biāo)簽
現(xiàn)在我要給我是段落3，我是段落7設(shè)置顏色，因?yàn)槲沂嵌温?是第三個(gè)，而我是段落3不是第三個(gè)，所以這是，我們要用到同級(jí)別，同類型的第三個(gè)
??
4.? ? ? ? :nth-last-of-type? 選中同級(jí)別中同類型的倒數(shù)第幾個(gè)標(biāo)簽
??
5.? ? ? only-of-type? 選中父元素中唯一類型的某個(gè)標(biāo)簽
現(xiàn)在我想選中我是段落2，雖然它不是唯一的標(biāo)簽，我也想選中它，應(yīng)該這么寫
這時(shí)我發(fā)現(xiàn)我是段落1與我是段落2都變色了，因?yàn)樵赽ody中有唯一類型的p標(biāo)簽，而在div下也有唯一類型的p標(biāo)簽，所以這兩個(gè)都改變顏色了
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/2117.html
摘要：如果我們現(xiàn)在有一個(gè)需求，我想把所有的倍數(shù)改變顏色，應(yīng)該怎么辦呢然后只要是的倍數(shù)就改變顏色了，，，這個(gè)，用戶自定義，然后它就會(huì)選中滿足你公式的這一行。:nth-child(odd)選中同級(jí)別中的所有奇數(shù) :nth-child(even)選中同級(jí)別中的所有偶數(shù) :nth-of-type(odd)選中同級(jí)別中的所有奇數(shù) :nth-of-type(even)選中同級(jí)別中的所有偶數(shù) ? 如果從中還有...
摘要：下面列舉了游戲開發(fā)中常見的崗位以及兩條常見的協(xié)作開發(fā)的流水線其實(shí)學(xué)習(xí)游戲引擎，前期對(duì)于任何崗位來說路線都是相似的，基本上就是一個(gè)熟悉基本操作理解基本概念拓展專業(yè)知識(shí)的過程。當(dāng)然這不是絕對(duì)的，任何引擎的開始階段和大成階段都是相似的。 這是【游戲開發(fā)那些事】第51篇原創(chuàng) 前言：游戲引擎，表面...
摘要：如問到是否使用某框架，實(shí)際是是問該框架的使用場(chǎng)景，有什么特點(diǎn)，和同類可框架對(duì)比一系列的問題。這兩個(gè)方向的區(qū)分點(diǎn)在于工作方向的側(cè)重點(diǎn)不同。 [TOC] 這是一份來自嗶哩嗶哩的Java面試Java面試 32個(gè)核心必考點(diǎn)完全解析（完） 課程預(yù)習(xí) 1.1 課程內(nèi)容分為三個(gè)模塊 基礎(chǔ)模塊： 技術(shù)崗位與面試 計(jì)算機(jī)基礎(chǔ) JVM原理 多線程 設(shè)計(jì)模式 數(shù)據(jù)結(jié)構(gòu)與算法 應(yīng)用模塊： 常用工具集 ...
摘要：我們先來明確一點(diǎn)，什么是兄弟比如，和是兄弟，必須是同級(jí)關(guān)系，如果是嵌套關(guān)系，兒子，孫子則不可以。我們先來明確一點(diǎn)，什么是兄弟？ 比如，head和body是兄弟，必須是同級(jí)關(guān)系，如果是嵌套關(guān)系，兒子，孫子則不可以。 1.相鄰兄弟選擇器 CSS2 作用：給指定選擇器后面緊跟的那個(gè)選擇器選中的標(biāo)簽設(shè)置屬性 格式： 選擇器1+選擇器2{ 屬性：值; } 我們將兩...
摘要：什么是后代選擇器作用找到指定標(biāo)簽的所有后代標(biāo)簽，設(shè)置屬性。首先你要明確什么是后代你的兒子，孫子，重孫子等，只要有你的血脈的，都是你的后代。1.什么是后代選擇器？ 作用：找到指定標(biāo)簽的所有后代標(biāo)簽，設(shè)置屬性。 首先你要明確什么是后代？ 你的兒子，孫子，重孫子等，只要有你的血脈的，都是你的后代。 我們先來舉個(gè)例子 我們想讓div中的標(biāo)簽變紅 1.用標(biāo)簽選擇器可以做嗎？ 不可以，它會(huì)選中頁面上的...
閱讀 2953·2023-04-26 01:49
閱讀 2082·2021-10-13 09:39
閱讀 2294·2021-10-11 11:09
閱讀 936·2019-08-30 15:53
閱讀 2825·2019-08-30 15:44
閱讀 932·2019-08-30 11:12
閱讀 2992·2019-08-29 17:17
閱讀 2385·2019-08-29 16:57
