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 中不可能實現的任務成為可能。假設有乙個文件,其中有乙個邊欄,還有乙個主區。邊欄的背景為藍色,主區的背景為白色,這兩個區都包含鏈結列表。不能把所有鏈結都設定為藍色,因為這樣一來邊欄中的藍色鏈結都無法看到。解決方法是使用後代選擇器。在這種情況...