zoukankan      html  css  js  c++  java
  • nth-child(n)和nth-of-type(n)的区别

    1.官方解释:

      p:nth-child(2)     选择属于其父元素的第二个子元素的每个 <p> 元素。
      p:nth-of-type(2) 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。

    2.大白话

      p:nth-child(2)  选择p同级元素中的(从前到后的)第二个元素

      p:nth-of-type(2)  选择p同级元素中的第二个p元素

    第一个是不管谁都得算上,第二个只管看p元素

    简单的实例了解一下

    p:nth-child(2):

    <style>  p:nth-child(2) { background:hotpink; } /*选中的是p的父元素的第二个元素*/ </style>
    <body>
      <h1>这是标题</h1>
      <p>第一个段落。</p>
      <p>第二个段落。</p>
      <p>第三个段落。</p>
      <p>第四个段落。</p>
    </body>

    p:nth-of-type(2):

    <style>  p:nth-of-type(2){background: hotpink;} /* 选中的是p的父元素的子元素中第二个p*/ </style>
    <body>
        <h1>这是标题</h1>
        <p>第一个段落。</p>
        <p>第二个段落。</p>
        <p>第三个段落。</p>
        <p>第四个段落。</p>
        <p>第五个段落。</p>
    </body>

  • 相关阅读:
    二分搜素——(lower_bound and upper_bound)
    二分(搜索)查找
    算法复杂度中的O(logN)底数是多少
    hdu 1050 Moving Tables
    hdu 1010 Tempter of the Bone
    hud 3123 GCC
    “123”——> 123
    基本模运算
    101个MySQL的调节和优化的Tips
    一个最简单的图片缩略图
  • 原文地址:https://www.cnblogs.com/wuyufei/p/10453694.html
Copyright © 2011-2022 走看看