類別選擇器

透過點(.)和一個合法的字串就可以定義一個類別選擇器，例如:

.antzone

上面的程式碼就是一個類別選擇器，但為了讓類別選擇器有效，則需要在html元素中要有對應類別的定義，程式碼如下:

<div id="antzone"></ div>

程式碼實例如下:

<style type="text/css">
.antzone{
  width:100px;
  height:100px;
}
</style>
<div class="antzone"></div>

為了方便閱讀，上面的程式碼進行了精簡，注意class屬性值前面不能加點(.)。也可以給同一個元素施加多個類別選擇器，程式碼如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
.antzone{
  width:100px;
  height:100px;
  border:1px solid black;
}
.a{
  color:red;
}
.b{
  font-weight:bold;
}
</style>
</head>
<body>
<div class="antzone a b">php中文网</div>
</body>
</html>

class屬性值每一個類別用空格分隔即可，注意前面不能夠加點。

類別選擇器也可以結合元素選擇器一起使用，例如在頁面中有多個元素同時使用了類別"antzone"，但是有時候我們我只想針對class屬性值為antzone的div元素修改樣式，那麼我們可以這樣寫:

div.antzone{
  color:blue;
}

以上程式碼可以將具有class屬性值為antzone的div元素的字體顏色設定為藍色。

在上面的程式碼中已經介紹了，一個元素可以有多個類別名，中間用空格分隔，其實選擇器也可以讓多個類別連接起來程式碼如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>hp中文网</title>
<style type="text/css">
.antzone{
  width:100px;
  height:100px;
  border:1px solid black;
}
.antzone.a{
  color:blue;
}
</style>
</head>
<body>
<div class="antzone a b">php中文网</div>
<div class="antzone b">php中文网</div>
</body>
</html>

以上程式碼能夠將同時具有antzone和a類的元素有效。

有時候多個選擇器定義了相同的樣式屬性，如下:

.a{
  width:100px;
  height:100px;
}
.b{
  width:100px;
  height:100px;
  color:red;
}

以上程式碼可以修改如下:

.a,.b{
  width:100px;
  height:100px;
}
.b{
  color:red;
}

繼續學習

新建檔案

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>hp中文网</title> <style type="text/css"> .antzone{ width:100px; height:100px; border:1px solid black; } .antzone.a{ color:blue; } </style> </head> <body> <div class="antzone a b">hp中文网</div> <div class="antzone b">hp中文网</div> </body> </html>

重置程式碼

自動運行

提交

預覽 Clear