CSS選擇器-詳細介紹－網頁前端新手上路辛酸史

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>CSS選擇器-詳細介紹</title>
   <style type="text/css">
       /*標籤名稱選擇器*/
           body{
               font-size: 16px;
               font-family: "微軟正黑體";
               }
           h3{
               font-size: 24px;
               text-decoration: underline; /*底線*/
           }
       /* class 選擇器*/
           div.content{
               padding: 10px;
               border: 1px dashed #888888;
           }
       /* id 選擇器*/
           #button{
               border: 1px solid #888888;
               background-color: #ffffff;
               padding: 5px;
           }
       /*虛擬選擇器:搭配其他選擇器使用*/
       /*:hover 虛擬選擇器 :滑鼠移到目標上十，套用一組新的設定*/
           #button:hover{
               background-color: #888888;
           }
       /*:focus 虛擬選擇器 :當目標取得焦點時(輸入框)，套用一組新的設定*/
           input:focus{
               border: 2px solid #ff0000;
           }
       /*階層式選擇器:搭配其他選擇器使用*/
       .favorite a{
           color: #0000ff;
       }
       .demo a{
           color: #008800;
       }
   </style>
</head>
<body>
   <h3>我的自我介紹</h3>
   <div class="content">
       大家好，我是胖子。
   </div>

   <h3>我的最愛連結</h3>
   <ul class="favorite">
       <li><a href="www.facebook.com">Facebook</a></li>
       <li><a href="www.google.com">Google</a></li>
   </ul>

</body>
</html>

未命名.png