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

字體顏色沒有改變，請求指導(dǎo)

我把字號改大了一點(diǎn)方便查看效果，第一段span標(biāo)簽中的文字的顏色并沒有改變，之前的優(yōu)先級不是說就近原則的嗎，為什么沒有變呢，麻煩知道的指導(dǎo)一下。

小竹搖曳

2016-09-07

源自：初識HTML(5)+CSS(3)-升級版 8-10

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

1299

操作

收起

6 回答

慕粉3930173 回答被采納 +3 積分
2016-09-07

.first>span,#second>span{color:green;font-size:20px:}

或者.first,#second span{color:green;font-size:20px:}

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

收起回答

#1

小竹搖曳提問者

就是按照你的第二種寫法寫的，但是第一段的膽小如鼠四個(gè)字還是紅色的，第二段的倒是設(shè)置成功了。

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

#2

慕粉3930173 回復(fù) 小竹搖曳提問者

這是涉及9-2 權(quán)值問題。h1,span{color:red;}對于第一段里面span那段相當(dāng)于.first span{color:red;}權(quán)值為10+1=11，而.first,#second>span{color:green;}對于第一段里面span那段相當(dāng)于.first{color:green;}權(quán)值=10小于11 所以 h1,span{color:red;}這句權(quán)值大，所以優(yōu)先級高

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

#3

慕粉3930173 回復(fù) 小竹搖曳提問者

就近原則是在權(quán)值相等情況下才能采用，如果你想把膽小如鼠4個(gè)字改成綠色.first span,#second>span{color:green;} 或者 .first>span,#second>span{color:green;font-size:20px:}這兩種都行

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

查看2條回復(fù)

枯木里有龍吟
2016-09-07

我的意思是第一段先被.first{}渲染成綠色，20px，到膽小如鼠時(shí)，膽小如鼠被span{color ：red}二次渲染成了紅色，你的問題是你以為你的代碼是為兩個(gè)span都設(shè)置了兩個(gè)樣式，看哪個(gè)會(huì)生效，實(shí)際上是，第一個(gè)span先被渲染成了綠色（這次是因?yàn)樗莗標(biāo)簽的子標(biāo)簽，由于樣式的繼承性，也被渲染了），你設(shè)置的span{red}作用在了第一個(gè)標(biāo)簽上，#second>span{}作用在了第二個(gè)標(biāo)簽上

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

收起回答

小竹搖曳提問者
2016-09-07

為什么換了id選擇器還是沒有效果啊

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

收起回答

枯木里有龍吟
2016-09-07

ID選擇器在HTML文檔中只能使用一次，僅一次，在第二段的“簡單”上生效了，就沒了。那么第一段的“膽小如鼠”就只設(shè)置了一個(gè)樣式，沒有優(yōu)先級可言

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

收起回答

#1

小竹搖曳提問者

可是第一段是類選擇器啊，而且除了span標(biāo)簽中的文字顏色也都設(shè)置上了，按照你這種說法說不通啊。

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

#2

慕粉3930173

.span是類選擇器 #second才是ID選擇器

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

#3

枯木里有龍吟回復(fù) 小竹搖曳提問者

說的通。代碼先執(zhí)行到第一段開始處p標(biāo)簽，要進(jìn)行渲染，會(huì)通過設(shè)置的class="first"找到樣式，將第一段渲染成綠色，20px（CSS的某些樣式是具有繼承性的，color和font-size顯然具有繼承性，而span標(biāo)簽是p標(biāo)簽的子元素，所以也會(huì)被渲染），然后再執(zhí)行，發(fā)現(xiàn)第一段里面還有個(gè)span標(biāo)簽，而且單獨(dú)設(shè)置了樣式{color : red},這時(shí)，膽小如鼠會(huì)被二次渲染為紅色。由于ID選擇器的優(yōu)先級高于類選擇器，所以第二次設(shè)置的>span{color:green; font-size : 20px}作用在了第二段的“簡單”上，而ID選擇器只能生效一次

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