CSS偽類選擇器使用例項
阿新 • • 發佈：2018-12-26
今天的小技巧主要是搞明白了CSS3新增的偽類選擇器，並和之前的偽類選擇器做比較~~~
每一次看偽類選擇器的介紹總有一種語文沒學好的感覺，so只能上例項理解了~
這次主要學習了 :first-of-type/:last-of-type/:only-of-type/:nth-child(n)
//======================================================
例項用到的html結構
<body> <div id="outer"> <h1>我是h1,父div中的第一個子元素</h1> <p>我第一個p元素，父div中的第二個子元素</p> <p>我是第二個p元素，父div中的第二個子元素</p> <hr> <div id="inner"> <h2>我是h2，子div1中的第一個子元素</h2> <p>我是第一個p元素，子div1中的第二個子元素</p> <p>我是第二個p元素，子div1中的第三個子元素</p> <p>我是第三個p元素，子div1中的第四個子元素</p></div> <hr> <div> <p>我是第一個p元素，子div2中的第一個子元素</p> <p>我是第二個p元素，子div2中的第二個子元素</p> </div> <hr> <div> <h2>我是h2，子div3的第一個子元素</h2> <p>我是唯一p元素，子div3的第二個子元素</p></div> <hr> <div> <p>我是唯一p元素，子div4中唯一一個子元素</p> </div> </div> </body>
一、p:first-of-type —— 該父元素中，所有p子元素中的第一個；
（1）直接使用，所有div標籤中 第一個p元素變色
（2）與p:first-child的區別
p:first-child 要求是第一個元素,且型別必須為p
二、p:last-of-type——該父元素中，所有p子元素中的最後一個；
與first-of-type類似
三、p:only-of-type——父div下，只有一個p標籤的元素；有無其他標籤無所謂，只要保證只有一個p
（1）直接使用
（2）與p:only-child的區別：
p:only-child 要求是div的唯一p元素，並且必須只有這一個元素
四、p:nth-child(2)——父元素的第2個子元素，且該子元素為p標籤
//========================================
總結
xxx-child有兩個條件：子元素在父元素中的位置 + 元素型別
xxx-of-type只有一個條件：該類子元素中的位置