【无标题】

最新推荐文章于 2024-07-23 16:37:55 发布

qq_42238110

最新推荐文章于 2024-07-23 16:37:55 发布

阅读量73

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_42238110/article/details/127248783

版权

结构伪类选择器

结构伪类
先排序，再匹配
:first-child
:last-child
:nth-child()
数字 1 2 3
关键词 odd 奇数 even 偶数
公式 2n-1 奇数 2n 偶数
*/

  <p>0000000000000</p>
<div class="demo">aaaaaaaaaaa</div>
<div>bbbbbbbbbbbbb</div>
<p>cccccccccccccc</p>
<div>
    <div>ddddddddddddddd</div>
    <p>eeeeeeeeeeeeee</p>
    <div class="demo">fffffffffffffff</div>
    <p>11111111111111111</p>
    <div>2222222222222</div>
    <div>3333333333333</div>
</div>
<p>4444444444444444</p>
<p>55555555555555</p>
<div>
    <div class="demo">999999999999999</div>
    <p>666666666</p>
    <div>77777777777</div>
    <p>4545454545454</p>
    div:first-child {
            color: red;
        }
        div:first-child {
            color: red;
        }

2.结构伪类
先匹配，再排序
:first-of-type
:last-of-type
:nth-of-type()
数字 1 2 3
关键字 odd奇数 even偶数
公式 2n-1 2n
*/

 <p>0000000000000</p>
<div class="demo">aaaaaaaaaaa</div>
<div>bbbbbbbbbbbbb</div>
<p>cccccccccccccc</p>
<div>
    <p class="demo">ddddddddddddddd</p>
    <p>eeeeeeeeeeeeee</p>
    <div class="demo">fffffffffffffff</div>
    <p>11111111111111111</p>
    <div>2222222222222</div>
    <div>3333333333333</div>
</div>
<p>4444444444444444</p>
<p>55555555555555</p>
<div>
    <div class="demo">999999999999999</div>
    <p>666666666</p>
    <div>77777777777</div>
    <p>4545454545454</p>
</div>
   .demo:first-of-type {
            color: red;
        }