CSS3的后代选择器和子选择器有什么区别啊，怎么感觉功能一样呢

Question

 <div class="div3">             <ul>                 <li>123123123123123123123</li>                 <li>                     <ul>                         <li>1231231231231231</li>                     </ul>                 </li>             </ul>         </div>就像这个例子，我给他设置样式如下两种方式，结果都一样.div3 ul li{                background-color: red;             }             .div3 ul>li{                background-color: red;             }

Answer 1

這邊有個誤區，你的選擇器 div3 ul 代表選擇 .div3 底下所有 ul 後代，自然連裡面第二層都被選取，還有設置背景顏色也會造成誤解，因為你設置了父元素的背景顏色，子元素沒做另外設定的話，看起來會像是都被設置了背景，因為子元素的背景顏色是透明的，你應該是要這樣寫

.div3 > ul li {

    border: 1px solid #000;

}

.div3 > ul > li {

    border: 1px solid #000;

}