技術標籤：css

目錄

• 正常demo
• 不正常的demo
• 解釋

正常demo

css

    ul {
      margin: 100px;
    }
    ul li:nth-child(3) {
      background-color: tan;
    }
    
    ul li:nth-of-type(2) {
      background-color: pink;
    }

html

  <ul>
    <p>p1</p>
    <p>p2</p>
    <li>11</li>
    <li>22</li>
  </ul>
 

結果：

不正常的demo

css

    ul {
      margin: 100px;
    }
    ul li:nth-child(3) {
      background: tan;
    }
    
    ul li:nth-of-type(2) {
      background: pink;
    }

html

  <ul>
    <p>
      p1
      <p>p3</p>
      <p>p4</p>
      <li>333</li>
      <li>444</li>
    </p>
    <p>p2</p>
    <li>111</li>
    <li>222</li>
  </ul>
 

結果

解釋

。。。