HTML class 屬性

admin發表於2018-11-10
HTML

class屬性可以為元素應用一個或者多個CSS樣式類。

利用此屬性可以與指定的CSS樣式類關聯起來，以此達到設定元素樣式的功能。

關於CSS類選擇器可以參閱CSS class 類選擇器一章節。

JavaScript也經常操作HTML元素的class屬性，具體參閱如下兩篇文章：

（1）.className屬性可以參閱JavaScript className 屬性一章節。

（2）.classList屬性可以參閱JavaScript classList 屬性一章節。

語法結構:

[HTML] 純文字檢視 複製程式碼
<element class="value">

引數解析：

（1）.value：屬性值，可以是一個或者多個CSS樣式類名，類名之間用空格分隔。

瀏覽器支援:

（1）.IE瀏覽器支援此屬性。

（2）.edge瀏覽器支援此屬性。

（3）.谷歌瀏覽器支援此屬性。

（4）.火狐瀏覽器支援此屬性。

（5）.opera瀏覽器支援此屬性。

（6）.safria瀏覽器支援此屬性。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title> 
<style>
 .ant{
   width:150px;
   height:60px;
   text-align:center;
   line-height:60px;
   color:red;
   background-color:#ccc;
  } 
</style>   
</head>  
<body>  
<div class="ant">螞蟻部落</div>
</body>  
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/10/124703mziuhuxqhii3jxzi.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.為div元素新增class屬性，並將屬性值設定為"ant"。

（2）.同時建立一個class選擇器名稱為"ant"的樣式類。

（3）.由於div的class屬性值與CSS類選擇器名稱相同，那麼此選擇器中屬性宣告將作用與此div。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title> 
<style>
.a{
  width:150px;
  height:60px;
  text-align:center;
  line-height:60px;
} 
.b{
  color:red;
  background-color:#ccc;
}
</style>   
</head>  
<body>  
<div class="a b">螞蟻部落</div>
</body>  
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/10/124728urdy6e0e1qd00kmp.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

class屬性值可以一次性設定多個樣式類，類名之間用空格分隔。

記住是空格，不要想當然的認為使用逗號分隔。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title> 
<style>
.a{
  width:150px;
  height:60px;
  text-align:center;
  line-height:60px;
  background-color:#ccc;
} 
.b{
  color:red;
}
</style>   
</head>  
<body>  
<div class="b" class="a">螞蟻部落</div>
</body>  
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/10/124802b8owel92s8q2zesv.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼僅字型顏色被設定為紅色，說明只有樣式類b生效。

通常情況下，後宣告的同名屬性會覆蓋先宣告的屬性，但是HTML中的屬性不一樣。

先宣告的class屬性生效，後面的同名屬性直接被忽略。

當然實際應用中要避免這種寫法，完全沒必要，也是錯誤的。

相關文章