CSS-僞類選擇器（未完待續。。。）

子節點選擇器

:nth-of-type() && :nth-child()

• :nth-of-type(n) 匹配父節點下同一級對應標籤的第n個節點 (:nth-last-of-type(n)反序)
• :nth-child(n) 匹配父節點下同一級第n個子節點且子節點爲對應標籤(:nth-last-child(n)反序)
• 值得注意的是：:nth-如添加了類名限制,查找時子節點的順序n不受類名限制影響，但查找到的結果受類名限制。

:nth-of-type() && :nth-child()區別

<div>
  <p>第1-1個p元素</p>
  <section>
    <p>第2-1個p元素</p>
    <section>第2-1個section元素</section>
    <p>第2-2個p元素</p>
    <p>第2-3個p元素</p>
  </section>
  <section>第1-2個section元素</section>
  <section>第1-3個section元素</section>
  <section>第1-4個section元素</section>
  <p>第1-2個p元素</p>
  <p>第1-3個p元素</p>
</div>

section > p, section > section {
  padding-left: 30px;
}
p:nth-of-type(2){
   color: red;
}
p:nth-child(2){
  background: red;
}
p.info:nth-of-type(2){
    
}

結果：p:nth-child(2) 無效

p:nth-of-type(2): 匹配父節點下的第二個是p的子節點
p:nth-child(2)： 匹配父節點下第二個子節點同時第二個子節點爲p

注意點

<div>
    <p>1</p>
    <div class="foo">
      <div class="foo">2-1</div>
      <div class="foo">2-2</div>
    </div>
    <p>3</p>
    <p class="foo">4</p>
    <p class="foo">5</p>
</div>

.foo:nth-of-type(2) {
  color: red;
}

效果：類名順序失效, 匹配每一級同一個類型的第二個標籤且類名爲foo的。
知足:nth-of-type(2)結果的爲<div class="foo">2-2</div>和<p>3</p>，可是<p>3</p>不匹配類名爲foo，因此最後匹配結果爲<div class="foo">2-2</div>

<div>
  <p>1</p>
  <div class="foo">
    <div class="foo">2-1</div>
    <div class="foo">2-2</div>
    <div class="foo">2-3</div>
  </div>
  <p>3</p>
  <p class="foo">4</p>
  <p class="foo">5</p>
</div>

p.foo:nth-of-type(3) {
  color: red;
}

結果：類名順序失效, 匹配每一級第三個p標籤且p標籤類名爲foo的。

div>p

匹配全部父級是<div>的<p>元素

兄弟節點選擇器

div+p

匹配全部緊接着<div>元素以後的<p>元素