你是想要這種效果嗎？

首先你很帥，然后你說改li為ul 那我先說明我的問題，你是想改變有序列表li為無序列表ul呢 還是直接就將樣式里的li改為ul、如果你是第一種，那么

.food>ul{

border:1px solid red;

}

<ul class="food">

? ? <ul>水果

? ? ? ? <ul>

? ? ? ? <li>香蕉</li>

? ? ? ? ? ? <li>蘋果</li>

? ? ? ? ? ? <li>梨</li>

? ? ? ? </ul>

? ? </ul>

找的就是類名為food下面的子標簽（已經將li改為ul）的無序列表，親測，邊框沒消失。如果第二種，那么ul作為孫子輩的標簽當然找不到，應該

.food li ul{

border:1px solid red;

}

，可能說的不對，不對請指正

因為你的class="food"是在第一個ul里，你用.food>ul就找不到它的第一代子元素，你可以試試用span框在最外層，再用.food>ul,就可以了，如果想把蔬菜和水果分開紅色框，還可以用.food>ul>li

<span class="food">

<ul>

? ? <li>水果

? ? ? ? <ul>

? ? ? ? <li>香蕉</li>

? ? ? ? ? ? <li>蘋果</li>

? ? ? ? ? ? <li>梨</li>

? ? ? ? </ul>

? ? </li>

? ? <li>蔬菜

? ? <ul>

? ? ? ? <li>白菜</li>

? ? ? ? ? ? <li>油菜</li>

? ? ? ? ? ? <li>卷心菜</li>

? ? ? ? </ul>

? ? </li>

</ul>

</span>

就甩個CSS誰知道