深入理解css3伪类选择器

作者: Weastsea | 来源:发表于2018-09-17 00:14 被阅读0次

CSS进阶知识点--CSS3伪类选择器和伪元素
HTML5和CSS3新增内容
第2章 CSS3选择器-4
2019前端经典面试题 CSS 部分常见问题
CSS3属性选择器
前端零基础课程--第八节课
CSS3笔记（一）选择器
巧用CSS3伪类选择器自定义checkbox和radio的样式
css3(1)
CSS伪类伪元素

E:nth-of-type(n)
表示E的父元素中，第n个类型为E的子节点。而不管其在兄弟内的位置如何。注意措辞跟nth-child的区别，这也是理解两者的关键。
E:nth-last-of-type(n)
表示从后往前计算，E的父元素中，第n个类型为E的子节点，而不管其在兄弟内的位置如何
自己可以写一些例子来帮组理解

参考链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-of-type

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div,h1{
                width: 100%;
                height: 50px;
                margin-bottom: 10px;
                border: 1px solid pink;
            }
            div:nth-of-type(1){
                background-color: yellow;
            }
            /*div:nth-of-type(odd){
                background-color: yellow;
            }
            div:nth-of-type(even){
                background-color:yellow;
            }*/
            /*div:nth-of-type(3n+1){
                background-color:green;
            }*/
            /*div:nth-last-of-type(1){
                background-color:red;
            }*/
        </style>
    </head>
    <body>
        <h1>1</h1>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
    </body>
</html>

E:nth-child(n)
表示E父元素中的第n个子节点，且类型为E。必须同时满足这两个条件，才能被选中。对比nth-of-type是严格匹配。

    p:nth-child(odd){background:red}/*匹配奇数行*/
    p:nth-child(even){background:red}/*匹配偶数行*/

E:nth-last-child(n)
表示从后往前计算，E父元素中的第n个子节点，且类型为E，必须同时满足这两个条件，才能被选中。

可以参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-child

E: first-child
表示一组兄弟元素中的第一个子节点，且类型是E。必须满足这两个条件，才能匹配成功。

可以参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/:first-child

E:last-child
与:first-child相反，表示一组兄弟元素中的最后一个子节点，且类型是E。必须满足这两个条件，才能匹配成功。

可以参考： https://developer.mozilla.org/zh-CN/docs/Web/CSS/:last-child

E:first-of-type
表示E父元素中，第一个出现的E类型的节点，而不管其在兄弟内的位置如何

可以参考： https://developer.mozilla.org/zh-CN/docs/Web/CSS/:first-of-type

E:last-of-type
表示E父元素中，最后一个出现的E类型的节点，而不管其在兄弟内的位置如何

可以参考： https://developer.mozilla.org/zh-CN/docs/Web/CSS/:last-of-type

E:only-child
表示E的父元素中，只有E一个子元素。注意：子节点不包含文本节点

可以参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/:only-child

E:only-of-type
表示了E类型元素没有其他相同类型的兄弟元素，也可以直接这么用:only-of-type 代表了任意一个元素，这个元素没有其他相同类型的兄弟元素。

可以参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/:only-of-type

可以配合代码来理解以上内容，根据理解，灵活的编写例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div,h1{
                width: 100%;
                height: 50px;
                margin-bottom: 10px;
                border: 1px solid pink;
            }
            div:first-child{
                background-color: yellow;
            }
            /* body div:last-child{
                background-color: yellow;
            } */
            /* body h1:first-of-type{
                background-color: yellow;
            } */
            /* body h1:last-of-type{
                background-color: yellow;
            } */
            /*h1 span:only-child{
                display: block;
                height: 20px;
                background-color: red;
            }*/
            /* h1 strong:only-of-type{
                display: block;
                height: 40px;
                background-color: red;
            } */
        </style>
    </head>
    <body>
        <h1>
            <span></span>
            <strong></strong>
        </h1>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
    </body>
</html>