擬似クラス

ド壺のツボ

擬似クラスでのつまずきの原因は、ul,ul li,ul li a　のどこの場所に何を指定したらいいのか、全くつかめていないところです。とりあえず、回答を数こなして打ちながら、感覚をつかめていければいいなと思っています。とりあえず、自分でも、何をどのように理解したらいいのかすら、見えてません。とりあえず、現状を残しておこうと思います。進みながら、また戻りつつ、何か掴めたらいいかなと。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>擬似クラス(1)</title>
<style type="text/css">
<!--
*{
  margin: 0;
  padding: 0;
}
.nav{
  line-hight:2.0;
  width:150px;
  margin:50px 0 0 50px;
  }
.nav li a:link{
  color:#000000;
  textdecoration: none
  }
.nav li a:visited{
  color:#000000;
  textdecoration:none
  }
.nav li a:hover{
  color:#FF8838;
  textdecoration:underline;
  }
.nav li a:activ{
  textdecoration:underline;
  }
-->
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">メニューのリンク1</a></li>
<li><a href="#">メニューのリンク2</a></li>
<li><a href="#">メニューのリンク3</a></li>
<li><a href="#">メニューのリンク4</a></li>
<li><a href="#">メニューのリンク5</a></li>
</ul>
</div>
</body>
</html>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Style" content="text/html;charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>CSS13擬似クラス</title>
<style type="text/css">
<!--
*{  
  margin: 0;
  padding: 0;
  }
.nav{
  color:#000000;
  width:200px;
  margin:50px 0 0 50px;
  background-color:#cccccc;
}
.nav ul{
  list-style-type:none;
}
.nav li a{
  display: block;
  border-bottom:#AAAAAA;
  textdecoration:none;
} 
.nav li a:link{
  color:#000000;
  }
.nav li a:visited{
  color:#000000;
  }
.nav li a:hover{
  color:#ff8838;
  }
.nav li a:activ{
  color:#ff8838;
  }   
-->
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">メニューのリンク1</a></li>
<li><a href="#">メニューのリンク2</a></li>
<li><a href="#">メニューのリンク3</a></li>
<li><a href="#">メニューのリンク4</a></li>
<li><a href="#">メニューのリンク5</a></li>
</ul>
</div>
</body>
</html>