乐山网站建设

专注高端品牌网站建设行业优质供应商！认准小谭建站！
028-86922220135-1821-9792
  • 首页
  • 网站建设
    网站设计包含服务 网站制作流程 有效沟通方式 售后服务
  • 微信开发
  • 案例展示
    乐山小谭建站公司作品案例展示
  • 新闻资讯
  • 解决方案
  • 小谭建站
  • 联系我们

    • CSS中nth-child与nth-of-type的元素查找方式有哪些

    这篇文章给大家分享的是有关CSS中nth-child与nth-of-type的元素查找方式有哪些的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

    创新互联为客户提供专业的做网站、成都网站设计、程序、域名、空间一条龙服务，提供基于WEB的系统开发. 服务项目涵盖了网页设计、网站程序开发、WEB系统开发、微信二次开发、移动网站建设等网站方面业务。

    nth-child和nth-of-type是css的两个伪选择符。应用中，这两者常常容易混淆。这里把它们拿出来仔细做个对比，看看这两者是怎么查找元素的。

    1. nth-child(n) —— 寻找第n个子元素

    2. nth-of-type(n) —— 寻找同一类型元素里的第n个元素

    看这个定义也许还不是很清楚他们的区别，我们一点点来区分。

    p:nth-child(2) 与 p:nth-pf-type(2)

    HTML代码如下

    

    
    pgh2
    
    
    pgh3
    
    
    pgh4
    
    
    pgh5
    

    

    
    div1
    
    
    div2
    
    
    div3
    
    
    div4

    分别应用两个样式, 都是找第二个元素

    p:nth-child(2) {
    color: red;
    font-weight:bold;
}
h6:nth-of-type(2) {
    color: blue;
    font-weight:bold;
}

    结果：两者都应用成功。

    CSS中nth-child与nth-of-type的元素查找方式有哪些

    现在我们对HTML代码做点改动，让他们出现一些不同。我们将第一个p元素和第一个h6元素改为label，代码如下：

    

    
    
    pgh3
    
    
    pgh4
    
    
    pgh5
    

    

    
    
    div2
    
    
    div3
    
    
    div4

    样式不变，这时再来看效果，发现nth-of-type(2)结果变了，这时高亮的是div3。到这里也算符合我们的逻辑。h6:nth-of-type(2)要找的是第二个h6类型的元素，也就是div3。

    CSS中nth-child与nth-of-type的元素查找方式有哪些

    继续改动HTML代码。我们恢复第一个p元素和第一个h6元素，将第二个p元素和第二个h6元素改为label，样式仍保持不变，结果会怎样呢？

    HTML如下：

    

    
    pgh2
    
    
    
    pgh4
    
    
    pgh5
    

    

    
    div1
    
    
    
    div3
    
    
    div4

    CSS 不变：

    p:nth-child(2) {
    color: red;
    font-weight:bold;
}
h6:nth-of-type(2) {
    color: blue;
    font-weight:bold;
}

    结果：nth-child没有效果，nth-of-type高亮的是div3。

    CSS中nth-child与nth-of-type的元素查找方式有哪些

    为什么会这样呢？

    1. nth-child 是查找一堆兄弟元素里的第二个元素，不管那元素是什么，只要它排行老二。这里左侧div找到的是，右侧div找到的是。找到之后，再和前面的选择符进行匹配，如果匹配对了，那就应用样式。前面的选择符是p，也就是要求元素是p类型，但这里都是label，不匹配，两个元素都不会应用这个样式。

    2. nth-of-type 是在一堆兄弟元素里找到相同HTML标记类型(Markup Type)元素中排行第二的元素。在左侧的div中，

      pgh4

      是p类型里排行第二的元素；在右侧的div中，
      div3
      是h6类型里排行第二的元素。找到之后，再和前面的选择符进行匹配，如果匹配对了，那就应用样式。前面的选择符是h6, 那么只有右侧div的
      div3
      元素应用了样式，左侧div的

      pgh4

      则不会。

    所以，nth-child和nth-of-type的不同之处就是查找元素的方式不同。前者是查找兄弟元素中某个绝对位置的元素，后者是查找同类型元素中某个绝对位置的元素。相同之处是，两者都是找到元素之后再与前面的选择符进行匹配，这里的匹配方式是一样的。

    稍微往下延伸，清楚了查找方式，那么不管前面的选择符怎么变，最后都是先查找到元素再与前面的选择符进行匹配。也就是说选择符与他们的查找方式没有关系。弄清楚这个就不会被不同的组合混淆了。

    1. p:nth-child(2) 正确：查找第二个元素，且这个元素是p。错误：查找第二个为p的元素

    2. .info:nth-child(2) 正确：查找第二个元素，且这个元素的class包含"info"。错误：查找第二个class包含"info"的元素。

    3. p:nth-of-type(2) 查找相同HTML标记类型中排行第二的元素，且这个元素是p（或者直观的说查找第二个p类型元素）

    4. .info:nth-of-type(2) 查找相同HTML标记类型中排行第二的元素，且这个元素的class包含"info"

    感谢各位的阅读！关于“CSS中nth-child与nth-of-type的元素查找方式有哪些”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！


    新闻名称：CSS中nth-child与nth-of-type的元素查找方式有哪些
    本文URL：http://lszwz.com/article/ghhsdg.html

    其他资讯

    售后响应及时

    7×24小时客服热线

    数据备份

    更安全、更高效、更稳定

    价格公道精准

    项目经理精准报价不弄虚作假

    合作无风险

    重合同讲信誉，无效全额退款

    联系我们

    TEL

    135-1821-9792

    028-86922220

    地址：乐山市太升南路288号锦天国际

    快捷导航

    Shortcut

    二维码

    QR CODE

    • 微信公众号

    • 手机端网站

    乐山小谭建站工作室是一家专注从事于高品质视觉体验及互联网设计开发，乐山网站建设，乐山网站设计，乐山网页设计，乐山网站制作，品牌网站建设，营销网站建设，集团网站建设，企业网站建设，外贸网站建设，响应式网站建设，小程序开发，微信开发，企业形象设计，企业宣传视频等服务，小谭建站位于乐山市龙岗区大运软件小镇，小谭建站拥有经验丰富的高级网站建设工程师和一流的网页高端设计人员，具备各种规模与类型网站建设的雄厚实力，在网站建设领域树立了自己独特的设计风格。
    友情链接 交换友情链接
    php主机   网络推广   卖友情链接   做网站价格   成都主机托管   和正兴机械   成都移动服务器托管   成都租用服务器   手机网站制作   成都网站托管   

    Copyright © 2022 青羊区小谭信息技术咨询服务工作室 乐山建站工作室 All Rights Reserved   蜀ICP备2021004003号-25

    Copyright © 2022 青羊区小谭信息技术咨询服务工作室 乐山建站工作室 

    蜀ICP备2021004003号-25