關于權值的問題
<!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應該比 下面單項分類選擇符高才對 為什么寬度選擇下面的呢
2016-05-22
.main,.footer{ width:20%;margin:0 auto;}權值不是20,是10。分別為10.
當有相同權重的樣式存在時,會根據這些css樣式的前后順序來決定,處于最后面的css樣式會被應用。
2016-05-22
親 可是上面的權值是20 ?下面是10啊 怎么能一樣呢
2016-05-22
特殊性?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;}
注:加粗下劃線斜體部分是你要的答案。