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

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

比較看得出來差別

【热门文章】
【热门文章】