CSS

虛擬選擇器

• e:first-child：套用樣式於元素e的第一個子元素

  <style type="text/css">
      div:first-child { color: Red; }
  </style>
  
  <div>
      <span>Red</span>
      <span>Black</span>
  </div>
  

• e:first-line：套用樣式於區塊元素e的第一行文字

  <style type="text/css">
      div:first-line { color: Red; }
  </style>
  
  <div>
      <span>Red</span><br />
      <span>Black</span>
  </div>
  

• e:first-letter：套用樣式於元素e的第一個文字

  <style type="text/css">
      div:first-letter { color: Red; }
  </style>
  
  <div><span>RBB</span></div>  <!-- R顯示為紅色 -->
  <div>RBB</div>               <!-- R顯示為紅色 -->
  

• e:before：於指定樣式e前加入指定樣式的文字
  • 新插入的內容不會換行
  • 可用content: url(圖片網址);插入圖片

  <style type="text/css">
      div:before 
      {
          content: "DIV-Begin："; 
          color: Red; 
      }
  </style>
                  
  <div>Content</div>  <!-- 顯示 DIV-Begin：(紅色) Content（黑色)-->
  

• e:after：於指定樣式e後加入指定樣式的文字
  • 新插入的內容不會換行
  • 可用content: url(圖片網址);插入圖片

  <style type="text/css">
      div: after
      {
          content: "DIV-End："; 
          color: Red; 
      }
  </style>
                      
  <div>Content</div>  <!-- 顯示 Content（黑色) DIV-End：(紅色) -->
  

• a:link：若為未參觀過的超鏈結，則套用樣式

  <style type="text/css">
      a:link { color: Red;  }
  </style>
  

• a:active：若為正要參觀的超鏈結，則套用樣式
  • 正要參觀意指，滑鼠左鍵點擊超鏈結後，但還沒放開左鍵前

  <style type="text/css">
      a:active { color: Red;  }
  </style>
  

• a:visited：若為已參觀過的超鏈結，則套用樣式

  <style type="text/css">
      a:visited { color: Red;  }
  </style>
  

• e:hover：當滑鼠指標移到元素e上時，則套用樣式

  <style type="text/css">
      span:hover { color: Red;  }
  </style>
  

• e:focus：當元素e取得焦點時，則套用樣式

  <style type="text/css">
      input:focus { color: Red;  }
  </style>
  

• e:lang( )：當元素e有設定lang屬性時，則套用樣式

  <style type="text/css">
      input:lang(zh-tw) { color: Red;  }
  </style>