1.通配符選擇器
如果希望所有的元素都符合某一種樣式，可以使用通配符選擇器．
基本文法：
*{margin:0; padding:0} 可以讓所有的html元素的外邊距和内邊距都預設為0.
寫一段html代碼:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>hello world</p>
</body>
</html> 用浏覽器打開後，效果跟下面一樣：
這個時候想讓字型距離浏覽器的邊距為0時，就可以使用通配符選擇器了．
修改後的代碼如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
</style>
</head>
<body>
<p>hello world</p>
</body>
</html> 用浏覽器打開後的效果如下：
可以看到字型距離浏覽器的邊距差不多為0了．
2.組合選擇器
在css檔案中，組合選擇器可以是id選擇器，類選擇器，html标簽選擇器等
執行個體代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.span1{
color:red;
font-weigth:bold;
}
.span2{
color:red;
font-weight:bold;
font-size:30px;
}
.span3{
color:red;
font-weight:bold;
font-size:50px;
background-color:silver;
}
.span4{
color:red;
font-weight:bold;
font-size:50px;
background-color:silver;
font-family:"微軟雅黑";
}
</style>
</head>
<body>
<span class="span1">黃鶴樓送孟浩然之廣陵</span><br>
<span class="span1">故人西辭黃鶴樓</span><br>
<span class="span2">煙花三月下揚州</span><br>
<span class="span3">孤帆遠影碧空盡</span><br><br>
<span class="span4">唯見長江天際流</span><br>
</body>
</html> 重新整理浏覽器後顯示的效果如下：
雖然達到了效果，但是所用到的代碼太煩雜了，可以使用更好的辦法．
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.span1,.span2,.span3,.span4{
color:red;
font-weight:bold;
}
.span2{
font-size:30px;
}
.span3{
font-size:50px;
background-color:silver;
}
.span4{
font-size:50px;
background-color:silver;
font-family:"微軟雅黑";
}
</style>
</head>
<body>
<span class="span1">黃鶴樓送孟浩然之廣陵</span><br>
<span class="span1">故人西辭黃鶴樓</span><br>
<span class="span2">煙花三月下揚州</span><br>
<span class="span3">孤帆遠影碧空盡</span><br><br>
<span class="span4">唯見長江天際流</span><br>
</body>
</html> 重新整理浏覽器，看到的效果跟上面的是一樣的．
現在想要把網頁中所有的字型顔色都變成綠色的，就隻用修改一行代碼就可以了．
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.span1,.span2,.span3,.span4{
color:green;
font-weight:bold;
}
.span2{
font-size:30px;
}
.span3{
font-size:50px;
background-color:silver;
}
.span4{
font-size:50px;
background-color:silver;
font-family:"微軟雅黑";
}
</style>
</head>
<body>
<span class="span1">黃鶴樓送孟浩然之廣陵</span><br>
<span class="span1">故人西辭黃鶴樓</span><br>
<span class="span2">煙花三月下揚州</span><br>
<span class="span3">孤帆遠影碧空盡</span><br><br>
<span class="span4">唯見長江天際流</span><br>
</body>
</html> 修改後的效果如下：
現在再來修改代碼，在span2這個類标簽中添加一個顔色屬性，其值為紅色的，效果會怎麼樣呢？？
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.span1,.span2,.span3,.span4{
color:green;
font-weight:bold;
}
.span2{
font-size:30px;
color:red;
}
.span3{
font-size:50px;
background-color:silver;
}
.span4{
font-size:50px;
background-color:silver;
font-family:"微軟雅黑";
}
</style>
</head>
<body>
<span class="span1">黃鶴樓送孟浩然之廣陵</span><br>
<span class="span1">故人西辭黃鶴樓</span><br>
<span class="span2">煙花三月下揚州</span><br>
<span class="span3">孤帆遠影碧空盡</span><br><br>
<span class="span4">唯見長江天際流</span><br>
</body>
</html> 重新整理浏覽器後，顯示的效果如下：
可以看到span3标簽裡的屬性覆寫了span1裡的顔色設定．
關于組合選擇器的多元素選擇器的說明：
1.為了代碼簡潔，可以把各個選擇器的共同的樣式寫在一起，做成多元素選擇器
2.如果樣式發生了沖突，以寫在後面的樣式為準．