*和body有什麼區別

admin發表於2017-12-04

在介紹它們兩個我們首先應該知道這兩個符號在CSS檔案中充當的是什麼角色。在CSS檔案中*是萬用字元選擇器，它可以選擇文件中所有的元素，也就是說是一個通殺選擇器。body是一個普通的型別選擇器，只能夠選中body這麼一個元素。而之所大家會感覺到*和body選擇器有時候作用是相同的，主要是因為body是絕大多數佈局元素的父元素，如果元素的CSS屬性居有繼承性的話，那麼兩者的效果確實一樣。例如:

[CSS] 純文字檢視 複製程式碼
body{font-size:12px;}
*{font-szie:12px;}

以上兩個程式碼的作用是完全一樣的，因為font-size是居右繼承性的。但是大家還是要明白它們的原理是不一樣的，*選擇器確實是選擇了每一個元素並且把它們的字型大小設定為12px，body則是通過繼承將字型設定為12px的。

建議:

在很多CSS頁面的開頭都有這麼一句程式碼:

[CSS] 純文字檢視 複製程式碼
*{
  margin:0;
  padding:0
}

因為很多元素都有預設的內邊距或者外邊距，例如body、ul、p和標題元素h1-h6等。

使用以上程式碼可以很輕鬆的清除所有元素的外邊距和內邊距，但是也會帶來問題。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
*{
  margin:0px;
  padding:0px;
}
input{height:40px;}
</style>
</head>
<body>
<input type="text" name="mytest" />
</body>
</html>

以上程式碼可能會造成在一些瀏覽器中文字框輸入的文字顯示在左上角。

建議使用以下方式來統一定義樣式：

[CSS] 純文字檢視 複製程式碼
body,ul,h1,h2,h3,h4,h5,h6,form,dl,p{
  樣式程式碼
}

相關文章