類選擇器在層級列表中的使用
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css優先順序</title>
<style>
em{color: black;}
h1{color: red;}
.lanse{color: blue;}
#lvse{color:green;}
</style>
<link href="script/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<h1 id="lvse">歡迎訪問<em>我</em>的網站！！！</h1>
<h1 class="lanse">歡迎訪問<em>我</em>的網站！！！</h1>
</body>
</html>
樣式表的優先順序
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>層級列表</title>
<style>
.a1:link{color: #000000;text-decoration: none;}//當前位置
.a1:visited{color:#000000;text-decoration: none;}//滑鼠訪問過的狀態
.a1:hover{color: #FF0000;text-decoration:underline;}//滑鼠經過的位置
.a1:active{color:orange;text-decoration:underline;}//滑鼠選中的位置
.a2:link{color:#00FFC3;text-decoration: none;}
.a2:visited{color:#000000;text-decoration: none;}
.a2:hover{color: #FF0000;text-decoration:underline;}
.a2:active{color:orange;text-decoration:underline;}
.a3:link{color:#1000E7;text-decoration: none;}
.a3:visited{color:#000000;text-decoration: none;}
.a3:hover{color: #FF0000;text-decoration:underline;}
.a3:active{color:orange;text-decoration:underline;}
</style>
</head>
<dl>
<dt>蔬菜</dt>
<dd><a href="1" class="a1">茄子</a></dd>
<dd><a href="2" class="a2">西紅柿</a></dd>
<dd><a href="3" class="a3">土豆</a></dd>
<dd><a href="4" class="a1">黃瓜</a></dd>
<dd><a href="5" class="a2">豆角</a></dd>
<dt>水果</dt>
<dd><a href="">荔枝</a></dd>
<dd><a href="">蘋果</a></dd>
<dd><a href="">香蕉</a></dd>
<dd><a href="">桃子</a></dd>
<dd><a href="">西瓜</a></dd>
</dl>
<body>
</body>
</html>
