                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /HTML/CSS
                        
                        /初識(shí)HTML(5)+CSS(3)-升級(jí)版

我還是理解不了這個(gè)第一代選擇器

.food>li{

border:1px solid red;

}

是水果和蔬菜兩個(gè)li加了邊框，那為什么我在里面加上一條color:blue的話(huà)，ul li里面的香蕉白菜等字體顏色都會(huì)變成藍(lán)色？

慕仙6215699

2018-09-06

源自：初識(shí)HTML(5)+CSS(3)-升級(jí)版 8-7

關(guān)注問(wèn)題我要回答

1652

操作

收起

4 回答

吱吱叫的老鼠回答被采納 +2 積分
2018-09-06

.food>li{

border:1px solid red;

}? --這個(gè)就是選擇第一代子元素，但是因?yàn)榈谝淮釉乩锩孢€有第二代或者第三代元素，由于繼承的原因，他們會(huì)繼承第一代元素的樣式，但是我們可以自己給第二代子元素添加樣式，比如

.food > li{
?? ?border: 1px solid red;
?? ?background: blue;
}
.food li ul li{
?? ?background: green;
}

---你會(huì)發(fā)現(xiàn)22222222的背景是綠色的，11111111是藍(lán)色的

??? <ul class="food">
??????? <li>
??????????? <ul>
??????????????? <li>222222222</li>
??????????? </ul>
??????? </li>
??????? <li>
??????????? 111111111
??????? </li>
??? </ul>
??? 9999999999999999999999999

4 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

慕仙6215699 提問(wèn)者

搞明白了，謝謝

2018-09-06 回復(fù) 有任何疑惑可以回復(fù)我~

#2

qq_地維_0

那為什么紅色邊框樣式?jīng)]有得到繼承？而且如果第二代或第三代都能夠自動(dòng)地繼承第一代的樣式，那所謂的子代選擇器還有何意義？題主那個(gè)問(wèn)題可能跟顏色樣式的底層實(shí)現(xiàn)有關(guān)。

2018-10-15 回復(fù) 有任何疑惑可以回復(fù)我~

#3

吱吱叫的老鼠回復(fù) qq_地維_0

紅色邊框樣式被繼承了，只不過(guò)自己寫(xiě)了藍(lán)色邊框，講紅色邊框覆蓋掉了?？梢赃@樣理解，一開(kāi)始，我都想讓li是紅色邊框，但是后來(lái)想了想，發(fā)現(xiàn)部分第二代，第三代紅色邊框不好看，我就可以改成藍(lán)色邊框，其他的第二代第三代li的還是紅色邊框。這樣方便樣式統(tǒng)一與維護(hù)，減少冗余代碼

2018-12-16 回復(fù) 有任何疑惑可以回復(fù)我~