标签：flex center color 用法 content nth child

nth-child()用法

• nth-child(number)

  表示第几个子元素

   

  .div:nth-child(2) /*表示第二个子元素*/
  .div:nth-child(4) /*表示第四个子元素*/

  

• nth-child(odd)和nth-child(even)

  nth-child(odd)表示取出奇数的子元素，即取出第1，3，5，...个子元素

  nth-child(even)表示取出偶数的子元素，即取出第2，4，6，...个子元素

  

• nth-child(±an+b)

  表示从b点，向左或者向右按步长a(a>0)取出子元素，乍一看似乎不明白，举个例子

  假如div里面有12个子div，子div的位置[1,2,3,4,5,6,7,8,9,10,11,12]

  

  *{
      margin: 0;
      padding: 0;
  }
  ​
  body{
      display: flex;
      justify-content: center;
      align-content: center;
  }
  .father{
      width: 500px;
      height: 400px;
      background-color: red;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-content: center;
  }
  .child{
      width: 100px;
      height: 100px;
      background-color: yellow;
      border: 5px solid white;
      z-index: 1;
  }
  ​
  .father .child:nth-child(-1n+2){ /*从第二个子div往左按步长1取出元素*/ =>[1,2]
      background-color: blue;
  }

  

  *{
      margin: 0;
      padding: 0;
  }
  ​
  body{
      display: flex;
      justify-content: center;
      align-content: center;
  }
  .father{
      width: 500px;
      height: 400px;
      background-color: red;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-content: center;
  }
  .child{
      width: 100px;
      height: 100px;
      background-color: yellow;
      border: 5px solid white;
      z-index: 1;
  }
  ​
  .father .child:nth-child(-2n+10){ /*从第二个子div往左按步长2取出元素*/ =>[2,4,6,8,10]
      background-color: blue;
  }

  

  *{
      margin: 0;
      padding: 0;
  }
  ​
  body{
      display: flex;
      justify-content: center;
      align-content: center;
  }
  .father{
      width: 500px;
      height: 400px;
      background-color: red;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-content: center;
  }
  .child{
      width: 100px;
      height: 100px;
      background-color: yellow;
      border: 5px solid white;
      z-index: 1;
  }
  ​
  .father .child:nth-child(-2n-10){ /*从第-10个子div往左按步长2取出元素*/ =>取不到子元素
      background-color: blue;
  }

  

  *{
      margin: 0;
      padding: 0;
  }
  ​
  body{
      display: flex;
      justify-content: center;
      align-content: center;
  }
  .father{
      width: 500px;
      height: 400px;
      background-color: red;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-content: center;
  }
  .child{
      width: 100px;
      height: 100px;
      background-color: yellow;
      border: 5px solid white;
      z-index: 1;
  }
  ​
  .father .child:nth-child(2n-10){  /*从第-10个子div往右按步长2取出元素*/ =>[2,4,6,8,10]
      background-color: blue;
  }

•  

标签：flex,center,color,用法,content,nth,child
来源： https://www.cnblogs.com/LITMarker/p/15936089.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。