鱼C论坛

 找回密码
 立即注册
查看: 1570|回复: 0

[学习笔记] 039-结构伪类选择器(II)| css3

[复制链接]
发表于 2020-3-25 10:58:15 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
本帖最后由 liuzhengyuan 于 2020-3-30 21:41 编辑

《零基础入门学习web开发》第39讲 初学 css 的噩梦 VI | 学习笔记





思维导图:
039-0.png

:nth-child(n) & :nth-last-child(n) 不论元素的类型,从开头/最后一个子元素开始计数。
:nth-of-type(n) & :nth-last-of-type(n) 选择器匹配属于父元素的指定类型的正数/倒数第 n 个子元素。

详见 速查宝典 --> 传送门


☆ ☆ ☆  of-type 还可以使用 很多玩法

比如:

  1. p:nth-last-of-type(odd) {}
复制代码


更多到速查宝典(传送门

--不二(笔记





回到原本的形式

程序1:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>039</title>
  7.     <style>
  8.         p:nth-child(3) {
  9.             background-color: pink;
  10.         }

  11.         p:nth-last-child(4) {
  12.             background-color: cornflowerblue;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.     <p>1 aaaaaaaaaaaaaaaaaaaaaaaaaaa      p</p>
  18.     <span>2 bbbbbbbbbbbbbbbbbbbbbbbbbbb   span</span>
  19.     <p>3 ccccccccccccccccccccccccccc      p</p>
  20.     <p>4 ddddddddddddddddddddddddddd      p</p>
  21.     <p>5 eeeeeeeeeeeeeeeeeeeeee           p</p>
  22.     <p>6 fffffffffffffffffffff            p</p>
  23.     <p>7 ggggggggggggggggggggg            p</p>
  24.     <p>8 ssssssssssssssssssssssssssss     p</p>
  25.     <span>9 ssstttttttttssssssss          span</span>
  26.     <p>10 xxxxxxxxxxxxxxxxxxxxx           p</p>
  27. </body>
  28. </html>
复制代码


效果1:

039-1.png

为什么设置了倒数第 4 ,但是效果显示的是倒数第 3 呢?
038 讲过,VS code 会自己强制在代码后加一段 JS 代码






程序2:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         :nth-of-type(3) {
  9.             background-color: pink;
  10.         }

  11.         :nth-last-of-type(4) {
  12.             background-color: cornflowerblue;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.     <p>1 aaaaaaaaaaaaaaaaaaaaaaaaaaa      p</p>
  18.     <span>2 bbbbbbbbbbbbbbbbbbbbbbbbbbb   span</span>
  19.     <p>3 ccccccccccccccccccccccccccc      p</p>
  20.     <p>4 ddddddddddddddddddddddddddd      p</p>
  21.     <p>5 eeeeeeeeeeeeeeeeeeeeee           p</p>
  22.     <p>6 fffffffffffffffffffff            p</p>
  23.     <p>7 ggggggggggggggggggggg            p</p>
  24.     <p>8 ssssssssssssssssssssssssssss     p</p>
  25.     <span>9 ssstttttttttssssssss          span</span>
  26.     <p>10 xxxxxxxxxxxxxxxxxxxxx           p</p>
  27. </body>
  28. </html>
复制代码


效果:

039-1.png





· [url=]课后作业[/url]  ·






如果喜欢,别忘了评分  :


                               
登录/注册后可看大图

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-28 23:17

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表