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

字體顏色沒有改變，請求指導

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

小竹搖曳

2016-09-07

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

關注問題我要回答

1307

操作

收起

6 回答

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

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

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

0 回復有任何疑惑可以回復我~

收起回答

小竹搖曳提問者

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

2016-09-07 回復有任何疑惑可以回復我~

慕粉3930173 回復小竹搖曳提問者

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

2016-09-07 回復有任何疑惑可以回復我~

慕粉3930173 回復小竹搖曳提問者

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

2016-09-07 回復有任何疑惑可以回復我~

查看2條回復

枯木里有龍吟
2016-09-07

我的意思是第一段先被.first{}渲染成綠色，20px，到膽小如鼠時，膽小如鼠被span{color ：red}二次渲染成了紅色，你的問題是你以為你的代碼是為兩個span都設置了兩個樣式，看哪個會生效，實際上是，第一個span先被渲染成了綠色（這次是因為它是p標簽的子標簽，由于樣式的繼承性，也被渲染了），你設置的span{red}作用在了第一個標簽上，#second>span{}作用在了第二個標簽上

0 回復有任何疑惑可以回復我~

收起回答

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

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

0 回復有任何疑惑可以回復我~

收起回答

枯木里有龍吟
2016-09-07

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

0 回復有任何疑惑可以回復我~

收起回答

小竹搖曳提問者

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

2016-09-07 回復有任何疑惑可以回復我~

慕粉3930173

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

2016-09-07 回復有任何疑惑可以回復我~

枯木里有龍吟回復小竹搖曳提問者

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

2016-09-07 回復有任何疑惑可以回復我~