HTML+CSS入门 CSS子元素的伪类-职坐标

HTML+CSS入门 CSS子元素的伪类

沉沙 2018-09-18 来源：阅读 744 评论 0

摘要：本篇教程介绍了HTML+CSS入门 CSS子元素的伪类，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。

本篇教程介绍了HTML+CSS入门 CSS子元素的伪类，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。

:first-child 寻找父元素的第一个子元素，在所有的子元素中排序；
:last-child 寻找父元素的最后一个子元素，在所有的子元素中排序；
:nth-child 寻找父元素中的指定位置子元素，在所有的子元素中排序；
:first-of-type 寻找指定类型中的第一个子元素
:last-of-type 寻找指定类型中的最后一个子元素
:nth-of-type 寻找指定类型中的指定子元素

　　　　可以使用even，来找到偶数的子元素
　　　　可以使用odd，来找到奇数的子元素
demo:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*:first-child 寻找父元素的第一个子元素，在所有的子元素中排序；*/
            P:first-child{
                color: #ADFF2F;
            }
            /*:last-child 寻找父元素的最后一个子元素，在所有的子元素中排序；*/
            P:last-child{
                color: #008000;
            }
            /*:nth-child 寻找父元素中的指定位置子元素，在所有的子元素中排序；*/
            P:nth-child(3){
                color: #FFFFFF;
                background-color: #000000;
            }
            /*:first-of-type 寻找指定类型中的第一个子元素*/
            h3:first-of-type{
                color: red;
            }
            /*:last-of-type 寻找指定类型中的最后一个子元素*/
            h3:last-of-type{
                color: green;
            }
            /*:nth-of-type 寻找指定类型中的指定子元素*/
            h3:nth-last-of-type(2){
                color: yellow;
            }

            /*可以使用even，来找到偶数的子元素
            可以使用odd，来找到奇数的子元素*/
            h4:nth-last-of-type(even){
                color: red;
            }

            h4:nth-last-of-type(odd){
                color: green;
            }

        </style>
    </head>
    <body>
        <p>有时关切是问，有时关切是不问。</p>
        <h3>----我是分割线1----</h3>
        <p>这样水波不兴，你好我也好。</p>
        <h3>----我是分割线2----</h3>
        <p>山还是山，水还是水，生活和工作终会照旧。</p>
        <h3>----我是分割线3----</h3>
        <p>希望观念的改变能留得长久些：敬天悯人，相信人心</p>
        <h3>----我是分割线4----</h3>
        <br/>
        <br/>
        <br/>

        <h4>水 </h4>
        <h4>你眼睛的面积一定小于湖  </h4>
        <h4>你也很少哭  </h4>
        <h4>为什么坐在你面前 </h4>
        <h4>就像站在湖边</h4>
        <h4>细细的雾水就扯地连天 </h4>
    </body>
</html>