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

權值問題，沒計算明白，求解答

p{color:red;}

.first{color:green;}

p>span{color:purple;}

span{color:pink;}

第一行權值為1，第二行權值為10，第三權值為2，第四行權值為0.1，為啥顯示的是紫色？而不是綠色？難道是在類選擇器的基礎上在進行包含選擇，所以權值為12 ，顯示紫色么？不是很明白權值的計算操作

慕斯529798

2018-07-22

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

關注問題我要回答

1208

操作

收起

6 回答

worker1991
2018-09-01

做個實驗：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>特殊性</title>
<style type="text/css">

</style>
</head>
<body>
??? <h1>勇氣</h1>
??? <p class="first">三年級時，我還是一個<span>膽小如鼠</span>的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。</p>
??? <p id="second">到了三年級下學期時，我們班上了一節公開課，老師提出了一個很簡單的問題，班里很多同學都舉手了，甚至成績比我差很多的，也舉手了，還說著："我來，我來。"我環顧了四周，就我沒有舉手。</p>
</body>
</html>

1.毫無疑問，這兩段文字打印出來是黑色的。

2.在<style>標簽中加入

???? p{color:red;}

結果：兩段文字都變成紅色。

分析：第一段，<p>里面包含了一個<span>,這樣，相對這兩個標簽而言，p是父標簽，span是子標簽；父標簽定義了css樣式，而子標簽沒有定義css樣式，那么，子標簽會繼承父標簽的css樣式，權值為0.1,所以span里的文字也為紅色。

3.再加入代碼，變成

???? p{color:red;}
???? .first{color:green;}

結果：第一段文字變成綠色，第二段文字是紅色。

分析：對于第一段文字，有標簽選擇器和類選擇器都適用，但是選擇哪個？類選擇器權值為10，應用類選擇器.first的規則，文字是綠色。對于第一段p標簽里的span標簽，仍會繼承父標簽p的樣式，權值為0.1，span里的文字也是綠色。

4.再加入代碼，變成 ?

???? p{color:red;}
???? .first{color:green;}

???? span{color:pink;}

結果：第一段文字是綠色，其中的“膽小如鼠”四個字是粉色；第二段文字是紅色。

分析：對于第一段p里的文字，應用的是.first里的css樣式，權值為10，而span標簽從父標簽p繼承到的樣式（綠色）權值為0.1，但這是span自己定義了標簽樣式，權值為1，是粉色，所以span應用自己的css樣式，里面的文字“膽小如鼠”是粉色。

5.繼續加入代碼：

???? p{color:red;}
???? .first{color:green;}
???? span{color:pink;}
???? p span{color:purple;}

結果，第一段文字為綠色，其中的“膽小如鼠”四字為紫色；第二段的文字為紅色。

分析：由4可知，第一個p標簽有兩個可選樣式，p標簽選擇器（權值1）和.first類選擇器（權值10），第一個p標簽應用的是.first類選擇器；對于其中的span標簽，此時有三個選擇器是適用的，但是選擇哪個呢?分別計算一下權值。第一個樣式，是從父選擇器繼承下來的樣式，是綠色，權值為0.1，第二個樣式，是span標簽自己的選擇器span{color:pink;},是粉色，權值為1，第三個樣式是組合選擇器的樣式p span{color:purple;},紫色，權值為1+1=2。這其中2>1>0.1,所以span里的文字“膽小如鼠”顏色是紫色。

6.繼續加入代碼

???? p{color:red;}
???? .first{color:green;}
???? span{color:pink;}
???? p span{color:purple;}
???? .first span{color: yellow;}

結果：第一段文字為綠色，其中“膽小如鼠”四字為黃色；第二段文字為紅色

分析：接5分析，針對第一段p標簽里的span而言，此時又多了一個選擇樣式，也是組合選擇器樣式，為黃色，權值為10+1=11，span應用此選擇器樣式。