[CSS] CSS 選擇器手冊 (Selectors) - 其中有5個你必須知道若從事網頁設計者


什麼是CSS Selector

顧名思義就是透過 CSS 可以選取到某個的位置並渲染其效果。其種類大約分成以下幾種:
  1. Class selectors(Class選擇器,Dreamweaver稱為類別選擇器,這樣翻譯也對啦)
  2. ID selectors(ID選擇器)
  3. Type selectors(型態選擇器,Dreamweaver稱為標籤選擇器,因為套用於HTML標籤)
  4. Universal selector(通用選擇器)
  5. Attribute selectors(屬性選擇器)
  6. Descendant combinator(後代選擇器)
  7. Child combinator(子選擇器)
  8. Adjacent sibling combinator(同層相鄰選擇器)
  9. General sibling combinator(同層全體選擇器)
  10. Pseudo-classes(偽類選擇器)
  11. Pseudo-elements(偽元素選擇器)
  12. Groups of selectors(群組選擇器)
其中,W3C 定義1~5為單純選擇器 (Simple selectors),6~9為組合選擇器(Combinators)。

 

注意


CSS中的模式匹配是有區分大小寫的(case sensitive),所以請確保您在html頁面中定義完全相同的名稱。

 
Pattern樣式 作用描述 範例
* 匹配所有html標籤或元素 body, html, p, input, div, select, textarea
div 只匹配所有的 div 標籤
div {font-size: 13px;}

div, p 匹配 div 或 p 標籤
div, p {font-size: 13px;}

<p>Inside the paragraph text</p>
<div>Inside the div text</div>
        
div.header 匹配所有具有 class="header" 的 div 標籤
div.header {font-size: 13px;}

<div class="header">div with class header on it.</div>
        
p > span 將匹配 p 元素下的所有 span 標籤
p > span {font-size: 13px;}

<p><span>Span text inside the p tag </span></p>
        
div#header 匹配具有header ID​ 的 div 標籤
div#header {font-size: 13px;}

<div id="header">div with header ID on it.</div>
        
:link
:visited
超鏈接的匹配元素,如果鏈接未被訪問 (:link) 鏈接已訪問 (:visited)
a:visited  {color:red;}
a:link  {color:blue;}

點選此
<a href="#enteryourlinkhere">點選此</a>
        



 

參考資料


W3C 網站公佈的 css 2.1 selector syntax 

 

回上一頁

相關文章:

喜歡這篇文章嗎?立即分享

Posted : / Views: 810
Last updated :2017-06-30