[CSS] CSS基礎選擇器的介紹
YehYeh\'s Notepad yehyeh@gmail.com 

CSS

基礎選擇器

  • *:通用選擇器(Universal selector)
    • 將樣式套用於全部元素
      <style type="text/css">
          * { margin: 0px; padding: 0px; }
      </style>
      
  • e:元素選擇器(Element type selector)
    • 將樣式套用於指定元素
      <style type="text/css">
          div { color: Red; }
          p { color: Blue; }
      </style>
      
  • .class:類別選擇器(Class selector)
    • 將樣式套用於具指定類別的元素
      <style type="text/css">
          .Red { color: Red; }
      </style>
                                  
      <div class="Red"> Red </div>
      <p class="Red"> Red </p>
      
  • e.class:元素類別選擇器(Class selector)
    • 當元素e具指定類別class,則套用樣式
      <style type="text/css">
          div.Red { color: Red;}
      </style>
                                  
      <div class="Red"> Red </div>
      <p class="Red">  Black </p>
      
    • 元素e和.中間不可以有空白字元
  • #eid:ID選擇器(ID selector)
    • 將樣式套用於具指定ID的元素
      <style type="text/css">
          #Red { color: Red; }
      </style>
                                  
      <div id="Red"> Red </div>
      
  • e#eid:元素ID選擇器(ID selector)
    • 當元素e具指定ID eid,則套用樣式
      <style type="text/css">
          div#Red { color: Red; }
      </style>
                                  
      <div id="Red"> Red </div>
      <p id="Red"> Black </p>
      
    • 註:元素e和#中間不可以有空白字元
  • e1, e2 [,e3,...]:群組選擇器(Grouped selector)
    • 對e1、e2元素套用相同樣式
      <style type="text/css">
          div, p { color: Black; }                                
      </style>
                                  
      <div>Black</div>
      <p>Black</p>
      
  • e   d:後代選擇器(Descendant selector)
    • 若元素為d,且為元素e的子元素或子孫元素,則套用樣式
      <style type="text/css">
          div span { color: Black; } 
      </style> 
      
      <div>
          <span>Black</span> 
          <p> <span>Black</span> </p>
      </div>    
      
  • e > c:子元素選擇器(Child selector)
    • 若元素c為元素e的子元素,則套用樣式
      <style type="text/css">
          div > span { color: Blue; }                                
      </style>
                                  
      <div>
          <span>Blue</span>
          <p>
              <span>Black</span>
          </p>
      </div>  
      
  • e1 + e2:相鄰元素選擇器(Adjacent sibling selector)
    • 若元素為e2,且前面有e1元素,則套用樣式
      <style type="text/css">
          div + p { color: Blue; }                                
      </style>
      
      <div>
          <p>Black</p>
          <div>Black</div>
          <p>Blue</p>
      </div>