課時77.序選擇器（掌握）

appetizerio 發布于2019-04-23 13:37 / 953人閱讀

CSS3中新增的選擇器最具代表性的就是序選擇器。

1.同級別的第幾個

1.? ? ? :first-child 選中同級別中的第一個標簽

注意點：不區分類型

? ? ??

但是我們這里有一個注意點，如果我們在第一個p之前加一個h1，則第一個p就不變紅了，因為我們是選中同級別中的第一個標簽，在我們這個界面中，h1，p，div是同級別的，所以第一個p不變色。

2.? :last-child 選中同級別中的最后一個標簽

注意點：不區分類型

3.? ? :nth-child(n)? 選中同級別中的第幾個標簽

注意點：不區分類型

現在想給我是段落7設置成紅色，我是段落7是我們同級別中的第三個，我們應該這么寫

為什么我是段落2也變色了？因為對于body來說，h1，3個p和div都是同級別的，所以我選中同級別的第三個就也選中了我是段落2.

4.? ? ? :nth-last-child(n) 選中同級別中的倒數第幾個標簽

5.? ? ? ?:only-child? ? 選中父元素中唯一的元素

首先看body元素中有兩個元素，一個p，一個div，所以不是唯一元素，所以不變色，而div下只有一個p，所以變色，而如果在div下再添加一個h1標簽，則它們都不變色了，因為div下有兩個元素了，不是唯一都了

2.同類型的第幾個

1.? ? ? ?:first-of-type 選中同級別中同類型的第一個標簽

來看下面的例子：

怎么給我是段落1 設置成紅色呢？

首先，h1，兩個p，div是同級別的，而在這個同級別中，兩個p又是同類型的，所以我是段落1就是同類型的第一個，那我們有沒有辦法取出同級別中同類型的第一個呢？就用我們下面的方法：同類型的第幾個。

2.? ? ?:last-of-type 選中同級別中同類型的最后一個標簽

我們現在想讓我是段落2和我是段落5都變色，那么我們需要怎么做？

我們需要取出同級別同類型的最后一個，這個時候就取出了我是段落2和我是段落5

3.? nth-of-type(n)選中同級別中同類型的第幾個標簽

現在我要給我是段落3，我是段落7設置顏色，因為我是段落7是第三個，而我是段落3不是第三個，所以這是，我們要用到同級別，同類型的第三個

4.? ? ? ? :nth-last-of-type? 選中同級別中同類型的倒數第幾個標簽

5.? ? ? only-of-type? 選中父元素中唯一類型的某個標簽

現在我想選中我是段落2，雖然它不是唯一的標簽，我也想選中它，應該這么寫

這時我發現我是段落1與我是段落2都變色了，因為在body中有唯一類型的p標簽，而在div下也有唯一類型的p標簽，所以這兩個都改變顏色了

云服務器 GPU云服務器課時選擇器派生選擇器省市選擇器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/2117.html

課時78.序選擇器下（掌握）

摘要：如果我們現在有一個需求，我想把所有的倍數改變顏色，應該怎么辦呢然后只要是的倍數就改變顏色了，，，這個，用戶自定義，然后它就會選中滿足你公式的這一行。:nth-child(odd)選中同級別中的所有奇數 :nth-child(even)選中同級別中的所有偶數 :nth-of-type(odd)選中同級別中的所有奇數 :nth-of-type(even)選中同級別中的所有偶數 ? 如果從中還有...

tomato 2019-04-23 13:37 評論0 收藏0
我是如何學習游戲引擎的？

摘要：下面列舉了游戲開發中常見的崗位以及兩條常見的協作開發的流水線其實學習游戲引擎，前期對于任何崗位來說路線都是相似的，基本上就是一個熟悉基本操作理解基本概念拓展專業知識的過程。當然這不是絕對的，任何引擎的開始階段和大成階段都是相似的。這是【游戲開發那些事】第51篇原創前言：游戲引擎，表面...

未東興 2021-09-30 09:48 評論0 收藏0
Java面試 32個核心必考點完全解析

摘要：如問到是否使用某框架，實際是是問該框架的使用場景，有什么特點，和同類可框架對比一系列的問題。這兩個方向的區分點在于工作方向的側重點不同。 [TOC] 這是一份來自嗶哩嗶哩的Java面試Java面試 32個核心必考點完全解析（完）課程預習 1.1 課程內容分為三個模塊基礎模塊：技術崗位與面試計算機基礎 JVM原理多線程設計模式數據結構與算法應用模塊：常用工具集 ...

JiaXinYi 2019-08-16 16:53 評論0 收藏0
課時76.兄弟選擇器（掌握）

摘要：我們先來明確一點，什么是兄弟比如，和是兄弟，必須是同級關系，如果是嵌套關系，兒子，孫子則不可以。我們先來明確一點，什么是兄弟？比如，head和body是兄弟，必須是同級關系，如果是嵌套關系，兒子，孫子則不可以。 1.相鄰兄弟選擇器 CSS2 作用：給指定選擇器后面緊跟的那個選擇器選中的標簽設置屬性格式：　　　　　　選擇器1+選擇器2{ 　　　　　　　　　　　　屬性：值; } 我們將兩...

snowLu 2019-04-23 13:37 評論0 收藏0
課時71.后代選擇器（掌握）

摘要：什么是后代選擇器作用找到指定標簽的所有后代標簽，設置屬性。首先你要明確什么是后代你的兒子，孫子，重孫子等，只要有你的血脈的，都是你的后代。1.什么是后代選擇器？作用：找到指定標簽的所有后代標簽，設置屬性。首先你要明確什么是后代？你的兒子，孫子，重孫子等，只要有你的血脈的，都是你的后代。我們先來舉個例子我們想讓div中的標簽變紅 1.用標簽選擇器可以做嗎？不可以，它會選中頁面上的...

lixiang 2019-04-23 13:37 評論0 收藏0