iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 12
0

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

群組選擇器

複選元素一起套樣式,中間用逗號隔開。要注意的是,如果這個選擇器群組其中一個無效,則整個群組都會失效,所以如果粗心打錯字,比方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 可見選擇器真的很重要啊~明天見囉!/images/emoticon/emoticon41.gif

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


上一篇
Day11 CSS selector (1)
下一篇
Day13 CSS selector (3)
系列文
從門外漢到前端新手30

尚未有邦友留言

立即登入留言