css教程3.3——结构伪类选择器

        作用：用于选择文档树中符合特定结构的元素

先看下面的代码，它是我们下面例子的body：

  

常见的结构伪类选择器包括：  

1:first-child -

        作用：选择作为父元素的第一个子元素的元素

效果：

2:last-child -

        作用：选择作为父元素的最后一个子元素的元素

 

效果：

3:nth-child(n) -

        作用：选择作为父元素的第n个子元素的元素。

效果：

注意：我们上面选中p1，定位到父元素时，第一个元素必须是p元素才能生效！ 

        例如：假设父元素第一个不是p元素 ，是h元素

效果： 

        看，这就不会生效了！ 但是这样就不能精准定位了，很麻烦。没关系，下面介绍如何能精准定位 

4:nth-of-type(n) -

        作用：选择同类型兄弟元素中的第n个元素，可以精准定位

效果：

        看，这就可以精准定位啦！ 

上面介绍的是常见结构，那什么是伪类呢？不急，我马上告诉你

        我们现在body里加个a标签

再看这个代码，这就是伪类代码： 

效果： （这里播放不了视频，我只能用图片代替了，友友们，请原谅）

但没碰到这个伪类标签时，它不会显示效果 

看，但碰到这个标签时，它就会显示效果了。

        这也是我们在网站上常见的一种情况：当我们拿鼠标标移到那个位置时，就会出现一些图标或者其他东西，这就是伪类