Selector 選取器

1. The element Selector：

   h1 {
     font-size: 18px;
     color: #990000;
   }
   

2. The id Selector：
   HTML：

   <h2 id="headline2">這是由 id selector 控制</h2>
   

   CSS：

   #headline2 {
     font-size: 16px;
     color: #009900;
   }
   

3. The class Selector：
   HTML：

   <h3 class="headline3">這是由 class selector 控制</h3>
   

   CSS：

   .headline3 {
     font-size: 14px;
     color: #000099;
   }
   

4. Grouping：

   h1, #headline2, .headline3 {
     background-color: #eeeeee;
   }
   

5. Path：

   #firstArticle .title {
     font-size: 20px;
     color: #333333;
   }
   

6. 組合：
   HTML：

   <div class="level1">
     level1
     <div class="level2">
       level2
       <div class="level3">level3</div>
     </div>
   </div>
   

   CSS：

   .level1 {
     border-style: solid;
     border-width: 1px;
     border-color: #ff0000;
     width: 300px;
     height: 300px;
   }
   
   .level2 {
     border-style: solid;
     border-width: 1px;
     border-color: #00ff00;
     width: 200px;
     height: 200px;
   }
   
   .level3 {
     border-style: solid;
     border-width: 1px;
     border-color: #0000ff;
     width: 100px;
     height: 100px;
   }
   
   .level1 div {
     color: #999900;
   }
   
   .level1 > div {
     color: #990000;
   }
   
   .level1 .level3 {
     background-color: #112222;
   }
   
   .level3 {
     background-color: #eeeeee;/*無作用！*/
   }
   

   f04_selector.html