第 n 个子选择器 css [英] nth child selector css

问题描述

我这里有一个 div 模式，这个模式有至少 9 个 <div class="abc"> 并且这个模式是重复的.给定div的背景色

 1 白色2 绿色3白4 绿色5白6绿色7 绿色8白9绿色

为了使它工作，我编写了以下 css

 $(".test:nth-child(odd)").css("background-color","green");$(".test:nth-child(even)").css("background-color","green");$(".test:nth-child(7n)").css("background-color","green");$(".test:nth-child(8n)").css("background-color","white");$(".test:nth-child(9n)").css("background-color","green");

现在一切正常，但问题是当 div 的数量超过 9 时，第 10 个 div 从背景绿色开始，但它需要是白色的.

例如如果有 18 个 div 则

 1 白色2 绿色3白4 绿色5白6绿色7 绿色8白9绿色10白11绿色12白13绿色14白15绿色16绿色17白18绿

请提出解决这个问题的好公式

解决方案

我希望这个对你有帮助使用 css 使用这个

HTML:

<div class="test"></div><div class="test"></div><div class="test"></div><div class="test"></div><div class="test"></div><div class="test"></div><div class="test"></div><div class="test"></div>

css:

 .test{高度:100px；宽度:100px；边距:10px；}.test:nth-child(9n+1){background-color:white;}.test:nth-child(9n+2){background-color:green;}.test:nth-child(9n+3){background-color:white;}.test:nth-child(9n+4){background-color:green;}.test:nth-child(9n+5){background-color:white;}.test:nth-child(9n+6){background-color:green;}.test:nth-child(9n+7){background-color:green;}.test:nth-child(9n+8){background-color:white;}.test:nth-child(9n+9){background-color:green;}

见jsfiddle https://jsfiddle.net/db0eedrL/2/

I have a div pattern here , this pattern have minimum 9 number of <div class="abc"> and this pattern is repeating . The background color of div is given

    1 white
    2 green
    3 white
    4 green
    5 white
    6 green
    7 green
    8 white
    9 green

so to make it work I write following css

  $(".test:nth-child(odd)").css("background-color","green");
  $(".test:nth-child(even)").css("background-color","green");
  $(".test:nth-child(7n)").css("background-color","green");
  $(".test:nth-child(8n)").css("background-color","white");
  $(".test:nth-child(9n)").css("background-color","green");  

Now everything work , but the problem is that when number of divs comes more than 9 then the 10th div is starting from background green but it need to be white .

for example if there is 18 div then

    1  white
    2  green
    3  white
    4  green
    5  white
    6  green
    7  green
    8  white
    9  green
    10 white
    11 green
    12 white
    13 green
    14 white
    15 green
    16 green
    17 white
    18 green

please suggest good formula to solve this

解决方案

Hi i hope this one is help u use this one using css

HTML:

<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>

css:

  .test{
  height:100px;
  width:100px;
  margin:10px;
  }
  .test:nth-child(9n+1){background-color:white;}
  .test:nth-child(9n+2){background-color:green;}
  .test:nth-child(9n+3){background-color:white;}
  .test:nth-child(9n+4){background-color:green;}
  .test:nth-child(9n+5){background-color:white;}
  .test:nth-child(9n+6){background-color:green;}
  .test:nth-child(9n+7){background-color:green;}
  .test:nth-child(9n+8){background-color:white;}
  .test:nth-child(9n+9){background-color:green;}

see jsfiddle https://jsfiddle.net/db0eedrL/2/

这篇关于第 n 个子选择器 css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！