摘要:什么是后代選擇器作用找到指定標簽的所有后代標簽,設置屬性。首先你要明確什么是后代你的兒子,孫子,重孫子等,只要有你的血脈的,都是你的后代。
1.什么是后代選擇器?
作用:找到指定標簽的所有后代標簽,設置屬性。
首先你要明確什么是后代?
你的兒子,孫子,重孫子等,只要有你的血脈的,都是你的后代。
我們先來舉個例子
我們想讓div中的標簽變紅
1.用標簽選擇器可以做嗎?
不可以,它會選中頁面上的所有p,包括div以外的
2.用id選擇器可以做嗎?
可以,可以給div中的兩個p設置id,然后通過id選擇器給這兩個p設置顏色
3.用class選擇器可以做嗎?
可以,分別給它們設置class,然后設置顏色
但是無論是用id,class選擇器都有一個弊端,就是如果一個界面,div中有成千上萬個p怎么辦?難道你要一個個的去設置?這樣工作量就比較大了,所以要用到一個后代選擇器。
格式:
標簽名稱1 標簽名稱2{
? ? 屬性:值;
}
先找到標簽名稱叫做標簽名稱1的標簽,然后再在這個標簽下面去查找所有名稱叫做標簽名稱2的標簽,然后再設置屬性
div p{}
注意點:
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變顏色。
?
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/2125.html
摘要:什么是子元素選擇器作用找到指定標簽中所有特定的直接子元素,然后設置屬性。子元素選擇器可以通過符號一知延續下去1.什么是子元素選擇器? 作用:找到指定標簽中所有特定的直接子元素,然后設置屬性。 格式: 標簽名稱1>標簽名稱2{ ? ? ? ? ? ? ? ? ? ? ? ? ?屬性:值; } 先找到名稱叫做標簽名稱1的標簽,然后在這個標簽中查找所有直接子元素名稱叫做標準名稱2的元素 ?? 注意...
摘要:后代選擇器和子元素選擇器之間的區別后代選擇器使用空格作為連接符號子元素選擇器使用作為連接符號后代選擇器會選中指定標簽中,所有的特定后代標簽,也就是會選中兒子孫子,只要是被放到指定標簽中的特定標簽都會被選中。1.后代選擇器和子元素選擇器之間的區別? 1.1后代選擇器使用空格作為連接符號 子元素選擇器使用>作為連接符號 1.2后代選擇器會選中指定標簽中,所有的特定后代標簽,也就是會選中兒子/孫子...
摘要:下面列舉了游戲開發中常見的崗位以及兩條常見的協作開發的流水線其實學習游戲引擎,前期對于任何崗位來說路線都是相似的,基本上就是一個熟悉基本操作理解基本概念拓展專業知識的過程。當然這不是絕對的,任何引擎的開始階段和大成階段都是相似的。 這是【游戲開發那些事】第51篇原創 前言:游戲引擎,表面...
摘要:現在,我有一個需求,我要求將中的兩個標簽設置為紅色,要求用前面所有學過的選擇器來做這個練習。 現在,我有一個需求,我要求將div中的兩個p標簽設置為紅色,要求用前面所有學過的選擇器來做這個練習。 1.標簽選擇器 2.id選擇器 3.類選擇器 4.后代選擇器 5.子元素選擇器 6.交集選擇器 7.并集選擇器 8.通用兄弟選擇器 9.序選擇器 先找到同類型的p,n從0開始,先選...
摘要:我們先來明確一點,什么是兄弟比如,和是兄弟,必須是同級關系,如果是嵌套關系,兒子,孫子則不可以。我們先來明確一點,什么是兄弟? 比如,head和body是兄弟,必須是同級關系,如果是嵌套關系,兒子,孫子則不可以。 1.相鄰兄弟選擇器 CSS2 作用:給指定選擇器后面緊跟的那個選擇器選中的標簽設置屬性 格式: 選擇器1+選擇器2{ 屬性:值; } 我們將兩...
閱讀 2227·2021-11-15 11:39
閱讀 982·2021-09-26 09:55
閱讀 925·2021-09-04 16:48
閱讀 2831·2021-08-12 13:23
閱讀 919·2021-07-30 15:30
閱讀 2455·2019-08-29 14:16
閱讀 886·2019-08-26 10:15
閱讀 525·2019-08-23 18:40