這是對(duì)類別下的選擇器，給父級(jí)一個(gè)類（class）在給子級(jí)進(jìn)行選擇

?. food ul 這是找到ul

? .food li 這是找到li

? .food ul li 這是找的ul下的li

.food>ul這是可以找的ul但不可以找到li（.food>li)不行

.food ul>li 可以找到li

1. 在類選擇器food所在標(biāo)簽下的所有ul標(biāo)簽都會(huì)作用，比如.food li{border:1px solid red;}就會(huì)將每一個(gè)列表都加上紅色邊框，像下圖這樣，你可以在子選擇器的例子中將子選擇器改為后代選擇器

   

2. 同上

3. 類選擇器food下的ul下的li ?， 比如.food ul li{border:1px solid red;}，效果如下圖

   

4. >子選擇器表示的是第一代子元素，

   

   上面的第一代子元素是“水果”和“蔬菜”所在的li標(biāo)簽，以“香蕉”、“蘋果”、“梨”為一組的ul和以“白菜”、“油菜”、“卷心菜”為一組的ul為第二代子元素，第一代子元素中不包含ul標(biāo)簽所以不顯示效果。

5. .food ul>li ?這種寫法的意思是類選擇器food下的所有ul標(biāo)簽下的第一個(gè)子元素，比如.food ul>li{border:1px solid red;}

   ? ?

   上圖中food下的所有ul標(biāo)簽下的第一個(gè)子元素為li，ul為第二代子元素，所以有顯示邊框效果

3，這個(gè)的意思就是ul下每一層li里都應(yīng)用到.food

4，.food>ul是有效果的，不過你要把代碼寫到他的上一層里去定義，在這個(gè)例子里就是{body class="food"}...{/body};有

子選擇器作用的是第一代子元素，后代選擇器作用于所有后輩元素。

子選擇器作用的是第一代子元素，后代選擇器作用于所有后輩元素。

一二都比較簡(jiǎn)單，第三個(gè)的意思是作用于ul標(biāo)簽下的li標(biāo)簽，所以”水果“的那個(gè)li標(biāo)簽就沒有任何效果。

第四個(gè)問題，.food>ul之所以沒有效果，是因?yàn)?food類下面第一代子元素就沒有ul這個(gè)標(biāo)簽，當(dāng)然沒有效果了，不信可以把那個(gè)“水果”的那個(gè)li標(biāo)簽刪掉，再看效果。.food ul>li是可以的，不言自明

.food ul li這種是找到.food下面的ul，ul下面的所有l(wèi)i