html+css学习第三天（序号选择器+伪类与伪元素）

一、序号选择器

1.不区分类型(根据元素的位置序号找到元素)：

                :first-child：选中同级别中的第一个元素。

                :last-child：选中同级别中的最后一个元素。

                :nth-child(number)：选中同级别中的第几个(从1开始)元素。

2.区分类型(根据元素的种类找到元素)：

                :first-of-type：选中同级别中的第一个元素。

                :last-of-type：选中同级别中最后一个元素。

                :nth-of-type(number)：选中同级别中第几个(从1开始)元素。

3.奇偶数选选择：

                odd     选择同级别中的所有奇数

                even    选择同级别中的所有偶数。

eg：

        h2:nth-child(odd){

            color: red;

        }

        h3:nth-of-type(even){

            background-color: blue;

        }

二、伪类和伪元素

伪类：

           在选择器后可以通过  “ : ”  添加伪类，伪类是在一定条件下才能触发的样式。

伪元素：

                :hover：当鼠标指针在元素上悬停时触发。

                :visited：a标签的专用属性，表示访问过的。

                :focus：当元素成为焦点时触发。

                        焦点：

                                用户可以交互的元素才能成为焦点。

                                一个页面中同一时刻只有一个元素能够成为焦点。

                :first-letter  ：选择元素文本中的第一个字。

                :first-line  ：选择第一行。

                :before：前缀伪元素，为元素添加一个前缀。

                :after：后缀伪元素，为元素添加一个后缀。