亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

關于權值的問題

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>一列布局</title>

<style type="text/css">

body{ margin:0; padding:0; font-size:30px}

div{ text-align:center; font-weight:bold}

.main,.footer{ width:20%;margin:0 auto;}

.head{ width:100%; height:100px; background:#ccc}

.main{ height:600px;width:60% ;background:#FCC}

.footer{ height:50px;width:60%; background:#9CF}

</style>

</head>


<body>

<div class="head">head</div>

<div class="main">main</div>

<div class="footer">footer</div>

</body>

</html>

上面的類選擇符權值為20應該比 下面單項分類選擇符高才對 為什么寬度選擇下面的呢

正在回答

3 回答

.main,.footer{ width:20%;margin:0 auto;}權值不是20,是10。分別為10.

當有相同權重的樣式存在時,會根據這些css樣式的前后順序來決定,處于最后面的css樣式會被應用。

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

qq_毐埗_03252123 提問者

非常感謝!
2016-05-22 回復 有任何疑惑可以回復我~

親 可是上面的權值是20 ?下面是10啊 怎么能一樣呢

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

Yinsion_Nie

你沒看清楚,上面那里是.main, .footer中間有一個逗號,也就是說上面的和下面的權值是一樣的,都是10.上面那個是分別為.main和.footer設置寬度和外邊距。
2016-09-07 回復 有任何疑惑可以回復我~

特殊性?css權限知道規則:

標簽的權值為1,類選擇符的權值為10,ID選擇符的權值最高為100。例如下面的代碼:

p{color:red;}?/*權值為1*/

p?span{color:green;}?/*權值為1+1=2*/

.warning{color:white;}?/*權值為10*/

p?span.warning{color:purple;}?/*權值為1+1+10=12*/

#footer?.note?p{color:yellow;}?/*權值為100+10+1=111*/

注意:還有一個權值比較特殊--繼承也有權值但很低,有的文獻提出它只有0.1,所以可以理解為繼承的權值最低。

如果在元素里面加上!important?那么不管它多大權限都沒!important大??(但記住!important優先級樣式是個例外,權值高于用戶自己設置的樣式。)

層疊

層疊就是在html文件中對于同一個元素可以有多個css樣式存在,當有相同權重的樣式存在時,會根據這些css樣式的前后順序來決定,處于最后面的css樣式會被應用。

如下面代碼:

p{color:red;}

p{color:green;}

<p?class="first">三年級時,我還是一個<span>膽小如鼠</span>的小女孩。</p>

最后?p?中的文本會設置為green,這個層疊很好理解,理解為后面的樣式會覆蓋前面的樣式。

所以前面的css樣式優先級就不難理解了:

內聯樣式表(標簽內部)>?嵌入樣式表(當前文件中)>?外部樣式表(外部文件中)。

如果在元素里面加上!important?那么不管它多大權限都沒!important大??(但記住!important優先級樣式是個例外,權值高于用戶自己設置的樣式。)

p{color:red!important;}??那么?這個是權限最高的?優先顯示。

p{color:green;}

注:加粗下劃線斜體部分是你要的答案。

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

舉報

0/150
提交
取消
如何用CSS進行網頁布局
  • 參與學習       209566    人
  • 解答問題       1206    個

用最簡潔的案例教你布局的那些知識,這是前端工程師基本技能

進入課程

關于權值的問題

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號