添加链接 注册    登录
link之家
链接快照平台
  • 输入网页链接，自动生成快照
  • 标签化管理网页链接
相关文章推荐
旅途中的茄子  ·  南京大学教授莫砺锋来淮师讲学-淮阴师范学院·  1 月前    · 
冲动的鸵鸟  ·  大疆A型板使用经验分享（二）——A型板原理图 ...·  11 月前    · 
失落的金鱼  ·  《中国地名大会》第二季·  11 月前    · 
淡定的米饭  ·  《黄鸟》是畅销的战争小说，也是他行军路上常听 ...·  1 年前    · 
幸福的书签  ·  视频去哪了呢？_哔哩哔哩_bilibili·  1 年前    · 
link之家  ›  nth child选择器的权重
https://juejin.cn/s/nth%20child%E9%80%89%E6%8B%A9%E5%99%A8%E7%9A%84%E6%9D%83%E9%87%8D
安静的领结
2 年前

nth child选择器的权重

CSS 中的 nth-child 选择器的权重与其他选择器一样，是根据 CSS 选择器优先级规则来计算的。

CSS 选择器的优先级是根据以下规则计算的：

  • 以 !important 声明的样式具有最高优先级；
  • 样式规则中包含的行内样式具有第二高优先级；
  • 选择器的特殊性（specificity）决定了其权重，特殊性值越大，权重越高；
  • 如果特殊性相同，则后声明的样式会覆盖先声明的样式。

    • 对于 nth-child 选择器，其特殊性的计算方式是：

  • 标签选择器（如 div、p）的特殊性值为 0；
  • 类选择器（如 .class）的特殊性值为 1；
  • ID 选择器（如 #id）的特殊性值为 100；
  • 伪类选择器（如 :hover、:nth-child）的特殊性值为 10。

    • 因此，如果你使用了类似于 div:nth-child(2) 的选择器，它的特殊性值为 "0,0,0,2"，也就是说它的特殊性比仅包含一个类选择器的样式规则低，但比仅包含标签选择器的样式规则高。

    总之，当使用 nth-child 选择器时，需要根据具体情况考虑其权重，以避免样式覆盖的问题。

  • Mr柯小浩
    教你发现CSS3的"nth-child"和"nth-of-type"的区别！
    对于初学者来说，区别"nth-child"和"nth-of-type"是一个比较头疼的问题，为了更好帮助大家区别两者使用方法，特在此加以区分。
    • 7956
    CSS权重？每种选择器的具体权重比例？
    本文已参与「新人创作礼」活动，一起开启掘金创作之路。 CSS权重？每种选择器的具体权重比例？ 1.元素选择器 p{} 2.id选择器 #id{}（id不能重复，即使出现相同效果） 3.类选择器 .cl
    • 110
    CSS选择器权重和CSS3中的选择器
    开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第21天，点击查看活动详情 一、基础选择器与权重判断 内联样式表 1000 ID选择器 100 Class选择器 10 标签选择器
    • 24
    css样式篇：常见选择器及权重
    在开始之前 在写前端样式的时候，CSS选择器是非常重要的。阮一峰老师的文章很全面的介绍了各种选择器，为了方便自己使用，本文章摘抄了部分在开发过程中最为常见的部分，又通过阅读其他文章补充了选择器的权重。
    • 1092
    css child选择器妙用
    first-child表示选择列表中的第一个标签。 表示选择列表中的第3个标签，上面代码中的3也可以改成其它数字，如4、5等。想选择第几个标签，就填写几。 这个表示选择列表中的偶数标签，即选择 第2、第4、第6…… 标签。 同4系数为2时，这个表示选择列表中的偶数标签，即选择 …
    • 1532
    CSS的选择器
    要使用 CSS 对 HTML 的页面元素实现一对一，一对多或者多对一的控制，这就需要用到 CSS 选择器。HTML 页面中的元素就是通过 CSS 选择器控制的。 使用 id 选择器之前需要在 HTML 文档中的元素添加 id 名称，使用时需要在名称前加上 #，如(#id)。注意…
    • 1036
    CSS3选择器
    1.属性选择器|选择符|简介||---|---||E[attr]|选择具有attr属性的E元素||E[attr="val"]|选择具有attr属性且属性值等于val的E元素||E[attr^="val
    • 675
    使用 :nth-child 和其他选择器匹配 CSS 中的元素（二）
    接上文 :nth-last-child 选择器 CSS 中的 :nth-last-child 选择器允许我们根据元素在父容器中的位置（从最后一个子元素算起）来选择和设置特定元素的样式。
    • 1247
    选择器的权重
    根据渲染结果我们可以得出，它听了id选择器的话。
    • 367
    CSS常用选择器整理与选择器权重总结
    CSS中选择器的主要作用就是与HTML页面中的元素实现一对一，一对多或者多对一的控制。 文章对CSS选择器的常用类型进行了介绍整理，总结了css选择器权重的排行及其原理。
    • 123
    •  
    推荐文章
    旅途中的茄子  ·  南京大学教授莫砺锋来淮师讲学-淮阴师范学院
    1 月前
    冲动的鸵鸟  ·  大疆A型板使用经验分享（二）——A型板原理图和引脚图_大疆a板原理图-CSDN博客
    11 月前
    失落的金鱼  ·  《中国地名大会》第二季
    11 月前
    淡定的米饭  ·  《黄鸟》是畅销的战争小说，也是他行军路上常听的伊拉克歌谣_文化课_澎湃新闻-The Paper
    1 年前
    幸福的书签  ·  视频去哪了呢？_哔哩哔哩_bilibili
    1 年前
    今天看啥   ·   Py中国   ·   codingpro   ·   小百科   ·   link之家   ·   卧龙AI搜索
    删除内容请联系邮箱 2879853325@qq.com
    link之家 - 链接快照平台
    © 2024 ~ 沪ICP备11025650号