css中结构伪类用法（案例）

结构伪类有如下几种：

• :first-child

• :last-child

• :nth-child()

• :nth-last-child()

• :nth-of-type()

• :nth-last-of-type()

• :first-of-type

• :last-of-type

• :only-child

• :only-of-type

• :empty

  具体含义解释可以看网上的教程文档，这里只列举直观案例，便于区别理解记忆

  一、结构伪类选择的是该种类在其父元素下属于该种类的元素
  
  可以看到背景色并没有作用到第一个p上，而是加在了父元素上。给第一个p加样式的正确写法是

.fa p:first-child{background:cyan;}

二、first-child、last-child、nth-child()、nth-last-child()

这里需注意nth-child(a)是正数第a个，nth-last-child(a)是倒数第a个，a从1开始（可以对比jq选择eq(0)记忆）。注：没有nth-first-child这个伪类！！！
参数补充说明：

• 这里a代替数字，参数为从1开始的正整数
• 如果是nth-child(n)，这里的n代表一个从0开始的自然数（如2n代表位置为偶数的元素，2n+1代表位置为奇数的元素）。
• 参数为非数字的话，只能写字母n，不能用其他字母代替（规定）
• 单纯的选奇数个数元素：nth-child(odd)或nth-child(2n+1)
• 单纯的选偶数个数元素：nth-child(even)或nth-child(2n)
• 参数n的组合是多变的，具体使用情况按自己的需求来定（如选择前5个元素，nth-child(-n+5)，n从0递增，选中的元素就是5,4,3,2,1）

三、first-of-type、last-of-type、nth-of-type()nth-last-of-type()

四、XX-child系列与XX-type区别


绿箭头代表作用位置正确，红箭头代表作用不应该的位置（XX-child由于该位置不是指定元素p而是span，所以样式无效）

五、:only-child和:only-of-type区别
①only-child条件是父元素下只有一个子元素，且子元素是选定的类型（案例给的是p，class="fa"的div中，有两个子元素(div和p)故而不符合，但包裹“第一”的div的p符合这个要求，背景色设置生效）
②only-of-type条件是父元素下只能有一个指定类型的子元素，该子元素有多少个其他类型的兄弟不重要（以上图为举例，子元素是p，兄弟元素必须是除了p的其他类型！！！请看下图：）

六、:empty

:empty条件总结
① 该元素内不能有子元素
② 该元素内不能有任何内容，文字也不行，就算空格也不能有