課時71 後代選擇器(掌握)

2022-08-18 02:45:24 字數 1627 閱讀 3870

1.什麼是後代選擇器?

作用:找到指定標籤的所有後代標籤,設定屬性。

首先你要明確什麼是後代?

你的兒子,孫子,重孫子等,只要有你的血脈的,都是你的後代。

我們先來舉個例子

我們想讓div中的標籤變紅

1.用標籤選擇器可以做嗎?

不可以,它會選中頁面上的所有p,包括div以外的

2.用id選擇器可以做嗎?

可以,可以給div中的兩個p設定id,然後通過id選擇器給這兩個p設定顏色

3.用class選擇器可以做嗎?

可以,分別給它們設定class,然後設定顏色

但是無論是用id,class選擇器都有乙個弊端,就是如果乙個介面,div中有成千上萬個p怎麼辦?難道你要乙個個的去設定?這樣工作量就比較大了,所以要用到乙個後代選擇器。

格式:標籤名稱1 標籤名稱2

注意點:

1.後代選擇器必須用空格隔開

2.後代不僅僅是兒子,也包括孫子/重孫子,只要最終是放到指定標籤中的都是後代

3.後代選擇器不僅僅可以使用標籤名稱,還可以使用其它選擇器

1.將id名稱與標籤名稱結合使用

2.將類名稱與標籤名稱結合使用

3.將id名稱與id名稱結合使用

4.將id名稱與類名稱結合使用

我們在這裡需要補充一點:後代選擇器可以無限的往下延伸

有乙個空格代表是乙個後代

div  ul代表先找到div,從div中找到所有名字叫做ul的後代,只有乙個名字叫做ul的,然後再來個空格,代表著從ul中去找到名稱叫做li的後代,那我們這裡有幾個li的後代呢?我們可以找到兩個,後面又有了空格,代表著從li裡面去找p的後代,先找到li裡面叫做p的後代,找到了,就設定顏色,而第二個裡面沒有名字叫做p的後代,就沒有找到,沒有找到就什麼都不做,而如果第二段li中也有p,那麼就會有兩個p變顏色。

後代選擇器

後代選擇器 找到指定標籤的所有特定的後代標籤,設定屬性。1.什麼是後代選擇器?作用 找到指定標籤的所有特定的後代標籤,設定屬性 格式 標籤名稱1 標籤名稱2 先找到所有名稱叫做 標籤名稱1 的標籤,然後再在這個標籤下面去查詢所有名稱叫做 標籤名稱2 的標籤,然後在設定屬性 div p 注意點 1.後...

課時78 序選擇器下(掌握)

nth child odd 選中同級別中的所有奇數 nth child even 選中同級別中的所有偶數 nth of type odd 選中同級別中的所有奇數 nth of type even 選中同級別中的所有偶數 如果從中還有一些其它的標籤,我們可以用這個選擇器 nth child xn y ...

js原生後代選擇器 CSS 後代選擇器

具體應用 後代選擇器的功能極其強大。有了它,可以使 html 中不可能實現的任務成為可能。假設有乙個文件,其中有乙個邊欄,還有乙個主區。邊欄的背景為藍色,主區的背景為白色,這兩個區都包含鏈結列表。不能把所有鏈結都設定為藍色,因為這樣一來邊欄中的藍色鏈結都無法看到。解決方法是使用後代選擇器。在這種情況...