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