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元素(父级中可以存在其他元素)