關于子選擇器和后代選擇器疑問
還是有點凌亂的，大家試一下這幾種選擇方式呈現的效果：
? . food ul
? .food li
? .food ul li（這種方式哪位同學能和我解釋一下意義么）
?? 還有就是.food>ul 為什么沒有效果呢?有.food ul>li 這種選擇方式么
lanvy
2016-09-01
6 回答
舉報
0/150
提交
取消
2016-09-01
這是對類別下的選擇器，給父級一個類（class）在給子級進行選擇
?. food ul 這是找到ul
? .food li 這是找到li
? .food ul li 這是找的ul下的li
.food>ul這是可以找的ul但不可以找到li（.food>li)不行
.food ul>li 可以找到li
2016-09-01
在類選擇器food所在標簽下的所有ul標簽都會作用，比如.food li{border:1px solid red;}就會將每一個列表都加上紅色邊框，像下圖這樣，你可以在子選擇器的例子中將子選擇器改為后代選擇器
同上
類選擇器food下的ul下的li ?， 比如.food ul li{border:1px solid red;}，效果如下圖
>子選擇器表示的是第一代子元素，
上面的第一代子元素是“水果”和“蔬菜”所在的li標簽，以“香蕉”、“蘋果”、“梨”為一組的ul和以“白菜”、“油菜”、“卷心菜”為一組的ul為第二代子元素，第一代子元素中不包含ul標簽所以不顯示效果。
.food ul>li ?這種寫法的意思是類選擇器food下的所有ul標簽下的第一個子元素，比如.food ul>li{border:1px solid red;}
上圖中food下的所有ul標簽下的第一個子元素為li，ul為第二代子元素，所以有顯示邊框效果
2016-09-01
3，這個的意思就是ul下每一層li里都應用到.food
4，.food>ul是有效果的，不過你要把代碼寫到他的上一層里去定義，在這個例子里就是{body class="food"}...{/body};有
2016-09-01
子選擇器作用的是第一代子元素，后代選擇器作用于所有后輩元素。
2016-09-01
子選擇器作用的是第一代子元素，后代選擇器作用于所有后輩元素。
一二都比較簡單，第三個的意思是作用于ul標簽下的li標簽，所以”水果“的那個li標簽就沒有任何效果。
第四個問題，.food>ul之所以沒有效果，是因為.food類下面第一代子元素就沒有ul這個標簽，當然沒有效果了，不信可以把那個“水果”的那個li標簽刪掉，再看效果。.food ul>li是可以的，不言自明
2016-09-01
.food ul li這種是找到.food下面的ul，ul下面的所有li