關(guān)于后代選擇器
?<p class="first">三年級(jí)時(shí)，我還是一個(gè)<span>膽小如鼠</span>的小女孩，上課從來(lái)不敢回答<span>老師</span>提出的問題</p>
.first>span{color:red;} ?是不是這樣寫就只有"膽小如鼠"會(huì)變紅，
.first span{color:red;} ?而這樣寫"膽小如鼠"和"老師"都會(huì)變紅？
不知道是瀏覽器的問題還是什么，無(wú)論怎樣寫我這兩個(gè)詞全顯示紅色啊，我的代碼有問題嗎？
2016-02-23
你說(shuō)的是對(duì)的，.first>span{color:red;} ? ?first的第一代span子元素為紅色 ? 也就是說(shuō) ?膽小如鼠，.first span{color:red;} 他的所有span子元素都會(huì)變成紅色
2016-02-23
第一代不是第一個(gè)，只要不是嵌套在第一代后代里的，都屬于同一級(jí)后代。
2016-02-23
“膽小如鼠”和“老師”都有span標(biāo)簽，.first>span{color:red;}就會(huì)顯示紅色字體
2016-02-23
子選器
子選擇器，即大于符號(hào)(>),用于選擇指定標(biāo)簽元素的第一代子元素。
.food>li{border:1px solid red;}
這行代碼會(huì)使class名為food下的子元素li加入紅色實(shí)線邊框。
包含(后代)選擇器
包含選擇器，即加入空格,用于選擇指定標(biāo)簽元素下的后輩元素。
.first ?span{color:red;}
請(qǐng)注意這個(gè)選擇器與子選擇器的區(qū)別，子選擇器（child selector）僅是指它的直接后代，或者你可以理解為作用于子元素的第一代后代。而后代選擇器是作用于所有子后代元素。后代選擇器通過(guò)空格來(lái)進(jìn)行選擇，而子選擇器是通過(guò)“>”進(jìn)行選擇。
總結(jié)：>作用于元素的第一代后代，空格作用于元素的所有后代。
2016-02-23
你在其中一個(gè)span里邊，找一個(gè)字或者2個(gè)字，在加上一個(gè)span，這個(gè)span用>就不會(huì)變色。這樣理解直接后代就容易了，用 空格 一樣全部紅
2016-02-23
你理解錯(cuò)誤了，.first>span作用于元素的第一代后代，.first span作用于元素的所有后代。這里的.first>span只作用于“兒子”不作用于“孫子”，代碼中“<span>膽小如鼠</span>”和“<span>老師</span>”屬于同輩的兄弟關(guān)系，所以都會(huì)變紅，只有當(dāng)出現(xiàn)“<span>膽小<span>如鼠</span></span>”時(shí)，才會(huì)只有前面的“膽小”變紅。
2016-02-23
.first>span?：表示class為first下第一代span，"膽小如鼠"和"老師"都是第一代span，所以都是紅色：
.first>span?：表示class為first下所有span，所以都是紅色
2016-02-23
目前這兩種效果是一樣的，因?yàn)閮烧叨际莗的直接子代。