CSS的子选择器与后代选择器的区别
生活随笔
收集整理的這篇文章主要介紹了
CSS的子选择器与后代选择器的区别
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
?
來源于:http://www.jianshu.com/p/599654ba5f4a
子選擇器:
一個比較有用的選擇器子選擇器,即大于符號(>),用于選擇指定標(biāo)簽元素的第一代子元素。如右側(cè)代碼編輯器中的代碼:
.food>li{border:1px solid red;}
這行代碼會使class名為food下的子元素(第一子代)li(水果、蔬菜)加入紅色實線邊框。
包含(后代)選擇器:
包含選擇器,即加入空格,用于選擇指定標(biāo)簽元素下的后輩元素。如右側(cè)代碼編輯器中的代碼:
.first? span{color:red;}
這行代碼會使class名為first下的(所有后代)span標(biāo)簽內(nèi)的字體顏色變?yōu)榧t色。
區(qū)別:
請注意這個選擇器與子選擇器的區(qū)別,子選擇器(child selector)僅是指它的直接后代,或者你可以理解為作用于子元素的第一代后代。而后代選擇器是作用于所有子后代元素。后代選擇器通過空格來進(jìn)行選擇,而子選擇器是通過“>”進(jìn)行選擇。
總結(jié):>作用于元素的第一代后代,空格作用于元素的所有后代
轉(zhuǎn)載于:https://www.cnblogs.com/ys-wuhan/p/6733561.html
與50位技術(shù)專家面對面20年技術(shù)見證,附贈技術(shù)全景圖總結(jié)
以上是生活随笔為你收集整理的CSS的子选择器与后代选择器的区别的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 第八章-错误调试
- 下一篇: CSS 颜色 表示方法