HTML class 属性

小灰灰 2020-05-16 17:10 726阅读 0赞

# HTML class 属性

class属性可以为元素应用一个或者多个CSS样式类。

利用此属性可以与指定的CSS样式类关联起来，以此达到设置元素样式的功能。

语法结构:

```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.dandelioncloud.cn/" />  
<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>
```

代码分析如下：

（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.dandelioncloud.cn/" />  
<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>
```

class属性值可以一次性设置多个样式类，类名之间用空格分隔。

记住是空格，不要想当然的认为使用逗号分隔。

```html
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.dandelioncloud.cn/" />  
<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>
```

上述代码仅字体颜色被设置为红色，说明只有样式类b生效。

通常情况下，后声明的同名属性会覆盖先声明的属性，但是HTML中的属性不一样。

先声明的class属性生效，后面的同名属性直接被忽略。

当然实际应用中要避免这种写法，完全没必要，也是错误的。