浅谈nth-of-type的运行方式

浅浅的花香味﹌ 2022-11-04 05:28 11阅读 0赞

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style> .a-list:last-of-type { color: red; } .b-list:first-of-type { background: yellow; } </style>
      </head>
      <body>
        <h1>我是标题</h1>
        <span class="a-list">a0</span>
        <p class="b-list">b0</p>
        <p class="a-list">a1</p>
        <p class="a-list">a2</p>
        <p class="a-list">a3</p>
        <span class="b-list">b1</span>
        <span class="b-list">b2</span>
        <span class="a-list">b3</span>
        <p class="a-list">a4</p>
        <p class="a-list">a5</p>
        <p class="a-list">
          a6
          <span class="b-list">b4</span>
          <span class="a-list">a7</span>
          <span class="b-list">b5</span>
        </p>
        <h4 class="c-list">c1</h4>
        <h4 class="a-list">c2</h4>
        <h4 class="c-list">c3</h4>
      </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTMxNjk5_size_16_color_FFFFFF_t_70]  
nth-of-type(n)的作用模式是，先找到所有的对应的className，然后从当前className的标签找到所有当前标签元素的兄弟标签元素，然后按照位置先后顺序从1开始排序，看是否为第n个元素，是就加上样式，不是就不变。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTMxNjk5_size_16_color_FFFFFF_t_70]: /images/20221023/8731a576ab454118804a443ade3c890a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，11人围观）

还没有评论，来说两句吧...

相关阅读

相关浅谈CSRF攻击方式

一.CSRF是什么？　　CSRF（Cross-site request forgery），中文名称：跨站请求伪造，也被称为：one click attack/session

╰+哭是因爲堅強的太久メ/ 2023年10月17日 15:52/ 0 赞/ 106 阅读

相关浅谈Http的请求方式

看了网上很多的关于Http请求方式的文章，众说纷纭，于是决定自己花点时间总结一番，与大家分享，如有不妥之处还望海涵。 Http的几种请求方式： HTTP是一个客户端（用

本是古典何须时尚/ 2023年06月07日 03:15/ 0 赞/ 34 阅读

相关浅谈Spring WebFlux运行机制

随Spring 5一起发布了一个和Spring WebMvc同级的Spring WebFlux。这是一个支持反应式编程模型的新框架体系。反应式模型区别于传统的MVC最大的不同是

客官°小女子只卖身不卖艺/ 2022年11月20日 10:59/ 0 赞/ 177 阅读

相关浅谈nth-of-type的运行方式

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" />

浅浅的花香味﹌/ 2022年11月04日 05:28/ 0 赞/ 12 阅读

相关浅谈CSRF攻击方式

一.CSRF是什么？　　CSRF（Cross-site request forgery），中文名称：跨站请求伪造，也被称为：one click attack/session

小灰灰/ 2022年09月24日 05:20/ 0 赞/ 50 阅读

相关浅谈CSRF攻击方式

一.CSRF是什么？　　CSRF（Cross-site request forgery），中文名称：跨站请求伪造，也被称为：one click attack/session

缺乏、安全感/ 2022年08月20日 14:10/ 0 赞/ 19 阅读

相关浅谈CSRF攻击方式

一.CSRF是什么？　　CSRF（Cross-site request forgery），中文名称：跨站请求伪造，也被称为：one click attack/session

拼搏现实的明天。/ 2022年05月26日 03:38/ 0 赞/ 209 阅读

相关浅谈SpringMVC运行原理；

了解springMVC ，首先我们需要知道它是什么；能作甚么,设计理念是什么； > \springMVC提供了模型 model-视图 view-控制 controller

àì夳堔傛蜴生んèń/ 2022年04月22日 09:00/ 0 赞/ 275 阅读

相关浅谈CSRF攻击方式

[为什么80%的码农都做不了架构师？>>> ][80_] ![hot3.png][] 一.CSRF是什么？　　CSRF（Cross-site request forger

ゝ一世哀愁。/ 2022年01月17日 09:27/ 0 赞/ 307 阅读

相关浅谈CSRF攻击方式

CSRF 简介： CSRF（Cross-site request forgery），中文名称：跨站请求伪造，也被称为：one click attack/session r

矫情吗；*/ 2021年09月14日 00:02/ 0 赞/ 381 阅读