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

權(quán)值問題，沒計(jì)算明白，求解答

p{color:red;}

.first{color:green;}

p>span{color:purple;}

span{color:pink;}

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

慕斯529798

2018-07-22

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

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

1221

操作

收起

6 回答

worker1991
2018-09-01

做個(gè)實(shí)驗(yàn)：

<!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">三年級(jí)時(shí)，我還是一個(gè)<span>膽小如鼠</span>的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯(cuò)了老師會(huì)批評(píng)我。就一直沒有這個(gè)勇氣來回答老師提出的問題。學(xué)校舉辦的活動(dòng)我也沒勇氣參加。</p>
??? <p id="second">到了三年級(jí)下學(xué)期時(shí)，我們班上了一節(jié)公開課，老師提出了一個(gè)很簡單的問題，班里很多同學(xué)都舉手了，甚至成績比我差很多的，也舉手了，還說著："我來，我來。"我環(huán)顧了四周，就我沒有舉手。</p>
</body>
</html>

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

2.在<style>標(biāo)簽中加入

???? p{color:red;}

結(jié)果：兩段文字都變成紅色。

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

3.再加入代碼，變成

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

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

分析：對(duì)于第一段文字，有標(biāo)簽選擇器和類選擇器都適用，但是選擇哪個(gè)？類選擇器權(quán)值為10，應(yīng)用類選擇器.first的規(guī)則，文字是綠色。對(duì)于第一段p標(biāo)簽里的span標(biāo)簽，仍會(huì)繼承父標(biāo)簽p的樣式，權(quán)值為0.1，span里的文字也是綠色。

4.再加入代碼，變成 ?

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

???? span{color:pink;}

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

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

5.繼續(xù)加入代碼：

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

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

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

6.繼續(xù)加入代碼

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

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

分析：接5分析，針對(duì)第一段p標(biāo)簽里的span而言，此時(shí)又多了一個(gè)選擇樣式，也是組合選擇器樣式，為黃色，權(quán)值為10+1=11，span應(yīng)用此選擇器樣式。