css复习——结构性伪类

0803

结构性伪类

<style>
        p:nth-child(3){
            background-color: #000000;
        }
</style>

p:nth-child(n) 表示p元素的父级中的第n个子元素 并且这个子元素必须是p，否则没有反应。

<style>
        p:nth-last-child(2){
            background-color: #000000;
        }
</style>

p:nth-last-child(n) 表示p元素的父级中的第n个子元素 并且这个子元素必须是p 顺序从后往前数。
p:nth-last-child(1) 会选中p父元素中的最后一个子节点，并且这个子节点必须是p，否则没有反应。

<style>
        .list:nth-of-type(1){
            background-color: #000000;
        }
</style>

p:nth-of-type(n) 表示p元素的父级中的第n个p元素。

<style>
        p:nth-last-of-type(1){
            background-color: #000000;
        }
</style>

p:nth-of-type(n) 表示p元素的父级中的第n个p元素 顺序从后往前数。

<style>
        p:first-child{
            background-color: #0e3757;
        }
</style>

p:first-child 表示p元素的父级中的第一个子元素，并且这个元素必须是p

<style>
       p:last-child{
            background-color: #0e3757;
        }
</style>

p:last-child 表示p元素的父级中的最后一个子元素，并且这个元素必须是p。

<style>
        p:first-of-type{
            background-color: #0e3757;
        }
</style>

p:first-of-type 表示p元素的父级中的第一个p元素

<style>
        p:last-of-type{
            background-color: #0e3757;
        }
</style>

p:last-of-type 表示p元素的父级中的最后一个p元素

<style>
        h1:only-child{
            background-color: #F06000;
        }
</style>

h1:only-child 表示h1元素的父级中的唯一一个元素，并且这个元素必须是h1（！不能有其他元素）

<style>
        p:only-of-type{
            background-color: #0e3757;
        }
</style>

p:only-of-type 表示p元素的父级中的唯一一个p元素(父级中可以存在其他元素)