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

问题描述

问 题

       <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;
            }

解决方案

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

.div3 > ul li {
    border: 1px solid #000;
}


.div3 > ul > li {
    border: 1px solid #000;
}

比較看得出來差別

这篇关于javascript - CSS3的后代选择器和子选择器有什么区别啊，怎么感觉功能一样呢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！