【每天一個新的小知識】css3:last-of-type

以前一直以為.p:last-of-type是匹配到.p的父元素內的最后一個子.p元素。直到最近使用后發現不生效，認真去查相關用法后才發現：‘漏’！‘大漏特漏’！！

 

 

 

正確釋義或用法（自己理解，僅供參考）： 

<section class="test">
  <p class="p">這是一個p標簽 with class 'p'</p>
</section>

 .p:last-of-type，是匹配到

（1）.test中的最后一個.p元素（注意這兒是classname）

（2）該.p元素是.test的最后一個p元素。

必須同時滿足以上兩個條件，才能成功匹配到一個p元素，否則你的css樣式很可能不生效，自己還傻乎乎的嚎：為什么啊？！

 

為了加強理解，下面舉幾個🌰：

為匹配到的.p元素賦粉色背景

.p:last-of-type {
  background: rgb(235, 172, 172);
} 

<section class="test">
  <p class="p">這是一個p標簽 with class 'p'</p>
  <p class="p">這是一個p標簽 with class 'p'</p>
  <p class="p">這是一個p標簽 with class 'p'</p>
  <p class="p">這是一個p標簽 with class 'p'</p>
</section>

　

　

 匹配成功，這樣可成功為最后一個p標簽賦予粉色背景。

 

---

 

.p:last-of-type {
  background: rgb(235, 172, 172);
}

    <section class="test">
      <p class="p">這是一個p標簽 with class 'p'</p>
      <p class="p">這是一個p標簽 with class 'p'</p>
      <p class="p">這是一個p標簽 with class 'p'</p>
      <p class="p">這是一個p標簽 with class 'p'</p>
      <p>這是一個p標簽 without class 'p'</p>
    </section>

匹配不成功

 

---

 

  .p:last-of-type {
    background: rgb(235, 172, 172);
  }

    <section class="test">
      <p class="p">這是一個p標簽 with class 'p'</p>
      <p class="p">這是一個p標簽 with class 'p'</p>
      <p class="p">這是一個p標簽 with class 'p'</p>
      <p class="p">這是一個p標簽 with class 'p'</p>
      <div>I am a div</div>
    </section>

 

匹配成功