Question

简单的问题，因为我的数学技能失败了。我需要通过第n个子计算在容器中通过css来定位以下数量的元素：

6,9,21,24,36,39,51,54,66,69等

从6,9,21,24开始，总是有30个元素的间隙（6-> 36/9-> 39/21-> 51/24-> 54/36-> 66）

任何通过css定位这些元素的方法（可能只有少数几个nth-childs规则？），因为它是一篇无限循环的文章？因此，未来数量可能会增加，但网格系统将保持不变。

Answer 1

我认为您需要四个单独的nth-child规则，如下所示：

nth-child(30n+6),
nth-child(30n+9),
nth-child(30n+21),
nth-child(30n+24)
{
//...
}

Answer 2

你可以用2条规则来做。

＆＃13;

div:nth-child(15n + 6), div:nth-child(15n + 9) {
  color: red;
}

div {
  display: inline-block;
}

＆＃13;

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>
<div>17</div>
<div>18</div>
<div>19</div>
<div>20</div>
<div>21</div>
<div>22</div>
<div>23</div>
<div>24</div>
<div>25</div>
<div>26</div>
<div>27</div>
<div>28</div>
<div>29</div>
<div>30</div>
<div>31</div>
<div>32</div>
<div>33</div>
<div>34</div>
<div>35</div>
<div>36</div>
<div>37</div>
<div>38</div>
<div>39</div>
<div>40</div>
<div>41</div>
<div>42</div>
<div>43</div>
<div>44</div>
<div>45</div>
<div>46</div>
<div>47</div>
<div>48</div>
<div>49</div>
<div>50</div>
<div>51</div>
<div>52</div>
<div>53</div>
<div>54</div>
<div>55</div>
<div>56</div>
<div>57</div>
<div>58</div>
<div>59</div>

＆＃13;

选择正确的n-childs

2 个答案: