有一個比較有用的選擇器子選擇器,即大于符號(>),用于選擇指定標(biāo)簽元素的第一代子元素。
如代碼編輯器中的代碼:
.food>li{border:1px solid red;}
這行代碼會使class名為food下的子元素li加入紅色實線邊框。
>這個“選擇指定標(biāo)簽元素的第一代子元素”就是讓樣式只作用于它的孩子,不作用于他的孫子。
舉個例子:
“ 他們對自己的經(jīng)歷缺乏熱情
“經(jīng)歷”雖然是用span包的,但它是“p class="first"”的孫子,
它包在前一個span的里面(就是它孩子的里面),所以樣式對它不起作用。
如果把“>”改為空格,就會發(fā)現(xiàn)兩個span都有邊框了。空格用于元素的所有后代的。
空格是適用于所有對應(yīng)元素,而>則是適用于下一代,并且可以連續(xù)使用,即.first>span>span
感覺如果將編程比喻成一場戰(zhàn)爭,而不同的語言就是代表不同的兵種,兵種之下就是一群有著自己個性的士兵。我們學(xué)習(xí)的html和css還有js就是三個不同的兵種了,它們的標(biāo)簽語言代表了一群有著不同個性的士兵。
現(xiàn)在我們作為統(tǒng)帥,要學(xué)會的就是讓他們之間相互配合,接著就是不同兵種不同個性的士兵需要我們?nèi)贤ㄓ貌煌姆绞饺ズ退麄兘涣?,隨著時間的前進(jìn),這些溝通的方式演變成了不同的套路,而我們現(xiàn)在要學(xué)會的就是使用這些套路去讓它們幫我們贏得戰(zhàn)爭,如此而已。
如果將我們比作統(tǒng)帥,選擇器就是發(fā)布命令的方法,作為統(tǒng)帥當(dāng)然是希望將命令發(fā)布到每個士兵(標(biāo)簽)手中,讓他們能夠按照我們的命令去執(zhí)行任務(wù),所以才會有這么多的選擇器,讓統(tǒng)帥的命令通過選擇器進(jìn)行不同范圍的發(fā)布。