上一篇介紹了基礎的選擇器用法，今天來介紹進階的用法吧～

群組選擇器

複選元素一起套樣式，中間用逗號隔開。要注意的是，如果這個選擇器群組其中一個無效，則整個群組都會失效，所以如果粗心打錯字，比方div元素打成dov，那整個群組都不會套用到樣式。

• html

    <h2>自我介紹</h2>
    <h3>興趣</h3>
    <ol>
      <li>吃遍全台的雞排</li>
      <li>打game</li>
      <li>玩貓</li>
      <li>耍廢</li>
    </ol>
    <h3>安安你好加個朋友吧</h3>
    <nav>
      <ul>
        <li><a href="https://www.facebook.com">Facebook</a></li>
        <li><a href="https://twitter.com">Twitter</a></li>
        <li><a href="https://www.instagram.com">Instagram</a></li>
      </ul>
    </nav>
  

• css

    a{  
        color: inherit;  /*這行是指定a元素繼承父元素的樣式，因為<a>有預設的字體顏色，
                         這樣才能清掉它的預設顏色*/
    }
  
    h2, h3, ul {
        color: red;
    }
  

• 成果

  

後代選擇器

我們之前在HTML筆記時，學到了元素層級的概念，層級在css選擇器時也一樣成立。層級的選擇用" "空格隔開，nav a 就是選擇nav的後代 a（也可以解釋成在nav內尋找所有的 a。）

• html

    <h3>安安你好加個朋友吧</h3>
    <nav>
       <ul>
         <li><a href="https://www.facebook.com">Facebook</a></li>
         <li><a href="https://twitter.com">Twitter</a></li>
         <li><a href="https://www.instagram.com">Instagram</a></li>
       </ul>
    </nav>
  

• css

    nav a {
    	background-color: pink;
    }
  

• 成果

  

親代選擇器

親代元素必須是父層與子層的關係，親代選擇中間是用>來表示。如果中間隔了其他元素，就選擇不到。比方nav>a就無效。

• html

    <h2>自我介紹</h2>
    <h3>興趣</h3>
    <ol>
      <li>吃遍全台的雞排</li>
      <li>打game</li>
      <li>玩貓</li>
      <li>耍廢</li>
    </ol>
  

• css

    ol > li {
        color: green;
    }
  

• 成果

  

兄弟元素選擇器

1. 選擇緊接在後的兄弟元素（選擇相鄰的兄弟元素），用" + "來表示。所以如果元素跟B元素中間如果存在C元素，那麼A+B則會無效。

   • html

       <div>
       <h1 class="main">To do list</h1>
       <p>起床</p>
       <p>清理浴室</p>
       <p>餵狗</p>
       <p>吃早餐</p>
       </div>
     

   • css

       h1 + p {
           color: red;
       }
     

   • 成果（因為是緊鄰的元素，所以只會有第一個元素會被套用到樣式。）

     

2. 選擇某個元素之後每個兄弟元素（選擇後續的兄弟元素，但不包含該元素自己）。用符號" ~ "來表示，而且兩個兄弟元素之間隔著其他兄弟元素，也是可以選到。就是在A元素之後同層的兄弟元素B都會被選到。

   • html

       <h2>自我介紹</h2>
       <h3>興趣</h3>
       <ol>
         <li>吃遍全台的雞排</li>
         <li>打game</li>
         <li>玩貓</li>
         <li>耍廢</li>
       </ol>
       <h3>安安你好加個朋友吧</h3>
       <nav>
         <ul>
           <li><a href="https://www.facebook.com">Facebook</a></li>
           <li><a href="https://twitter.com">Twitter</a></li>
           <li><a href="https://www.instagram.com">Instagram</a></li>
         </ul>
       </nav>
     

   • css

       h2 ~ h3 {
           color: blue;
       }
     

   • 成果

     

屬性選擇器

1. 用來選擇擁有特定屬性或屬性值的元素，用元素+中括號" [ ] "來表示，" [ ] "內寫入屬性或屬性值。比如：

   • p[class] 有設定class屬性的p元素
   • img[src="pig.png"] 屬性值為“pig.png”的img元素

   要注意元素跟中括號之間不能有空格。

   • html

       <nav>
         <ul>
           <li><a href="https://www.facebook.com">Facebook</a></li>
           <li><a href="https://twitter.com">Twitter</a></li>
           <li><a href="https://www.instagram.com">Instagram</a></li>
         </ul>
       </nav>
     

   • css

       a[href="https://twitter.com"] {
           color: red;
       }
     

   • 成果

     

2. 只選擇部分屬性值，像上述例子，<a>元素的屬性值是一串網址很長，選擇部分屬性，會讓指令比較簡短。部分屬性選擇符很多樣，我們列點來解說：

   • html

       1. <h3 class="bar">123</h3>
       2. <h3 class="bar bra">456</h3>
       3. <h3 class="barbara">789</h3>
       4. <h3 class="bar-prince">135</h3>
       5. <h3 class="navbar">246</h3>
     

   • css

       1. h3[class~="bar"] {
             color: red;
          }
       2. h3[class*="bar"] {
             color: pink;
          }
       3. h3[class^="bar"] {
             color: orange;
          }
       4. h3[class$="bar"] {
             color: purple;
          }
       5. h3[class|="bar"] {
       			color: gray;
          }
     

   • 解說：

     1. 具有class屬性中以空白相隔的設定值中包含bar字串的元素
     2. 屬性值中包含bar字串的元素
     3. 屬性值以bar開頭的元素
     4. 屬性值以bar結尾的元素
     5. 屬性值以bar加上-符號命名或屬性值完全相符的元素

   • 後來寫的指令會蓋掉前面的指令，結果如下，大家動動腦看看是誰蓋掉誰吧！

   

今天的筆記告一段落，下一篇還是選擇器哦XD 可見選擇器真的很重要啊～明天見囉！

*有任何錯誤或描述不夠精準之處，歡迎指教，非常感謝。