css 使用第n个子元素，如何将一个方形父div的子元素划分为4个不同的样式区域？

rekjcdws 于 2023-05-08 发布在其他

关注(0)|答案(1)|浏览(167)

假设我有一个正方形的父div，它有100个大小相同的子div，类似于下图。
使用：nth-child选择器，我如何选择左上角、左下角、右上角、右上角的子节点，并为每个部分赋予不同的样式？
例如：选择子项1-5，然后选择11- 1 - 5，21-25，31-35，41-45，并为它们提供红色背景。

这是我目前所拥有的，目前只将其分为两半，但我想将其分为4：

.children:nth-child(n+1):nth-last-child(n+51) {
  background-color: red;
}
.children:nth-child(n+51) {
  background-color: blue;
}

css

来源：https://stackoverflow.com/questions/76183869/using-nth-child-how-to-divide-the-children-of-a-squared-parent-div-into-4-diffe

1条答案

按热度按时间

lnvxswe21#

使用选择“集”的“交集”：

.children {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid gray;
}

.children:is(
  /* Column 1 */
  :nth-child(10n + 1),
  /* Column 2 */
  :nth-child(10n + 2),
  /* Column 3 */
  :nth-child(10n + 3),
  /* Column 4 */
  :nth-child(10n + 4),
  /* Column 5 */
  :nth-child(10n + 5)
):nth-child(-n + 45) /* All elements up to 45 */ { 
  background-color: red;
}

.children:is(
  :nth-child(10n + 1),
  :nth-child(10n + 2),
  :nth-child(10n + 3),
  :nth-child(10n + 4),
  :nth-child(10n + 5)
):nth-child(n + 46) /* All elements from 46 onwards */ {
  background-color: slateblue;
}

.children:is(
  /* Column 6 */
  :nth-child(10n + 6),
  /* Column 7 */
  :nth-child(10n + 7),
  /* Column 8 */
  :nth-child(10n + 8),
  /* Column 9 */
  :nth-child(10n + 9),
  /* Column 10 */
  :nth-child(10n)
):nth-child(-n + 50) /* All elements up to 50 */ {
  background-color: lime;
}

.children:is(
  :nth-child(10n + 6),
  :nth-child(10n + 7),
  :nth-child(10n + 8),
  :nth-child(10n + 9),
  :nth-child(10n)
):nth-child(n + 51) /* All elements from 51 onwards */ {
  background-color: aqua;
}

<div style="display: grid; grid-template-columns: repeat(10, auto); grid-template-rows: repeat(10, auto); width: max-content; border: 1px solid gray">
  <div class="children">1</div>
  <div class="children">2</div>
  <div class="children">3</div>
  <div class="children">4</div>
  <div class="children">5</div>
  <div class="children">6</div>
  <div class="children">7</div>
  <div class="children">8</div>
  <div class="children">9</div>
  <div class="children">10</div>
  <div class="children">11</div>
  <div class="children">12</div>
  <div class="children">13</div>
  <div class="children">14</div>
  <div class="children">15</div>
  <div class="children">16</div>
  <div class="children">17</div>
  <div class="children">18</div>
  <div class="children">19</div>
  <div class="children">20</div>
  <div class="children">21</div>
  <div class="children">22</div>
  <div class="children">23</div>
  <div class="children">24</div>
  <div class="children">25</div>
  <div class="children">26</div>
  <div class="children">27</div>
  <div class="children">28</div>
  <div class="children">29</div>
  <div class="children">30</div>
  <div class="children">31</div>
  <div class="children">32</div>
  <div class="children">33</div>
  <div class="children">34</div>
  <div class="children">35</div>
  <div class="children">36</div>
  <div class="children">37</div>
  <div class="children">38</div>
  <div class="children">39</div>
  <div class="children">40</div>
  <div class="children">41</div>
  <div class="children">42</div>
  <div class="children">43</div>
  <div class="children">44</div>
  <div class="children">45</div>
  <div class="children">46</div>
  <div class="children">47</div>
  <div class="children">48</div>
  <div class="children">49</div>
  <div class="children">50</div>
  <div class="children">51</div>
  <div class="children">52</div>
  <div class="children">53</div>
  <div class="children">54</div>
  <div class="children">55</div>
  <div class="children">56</div>
  <div class="children">57</div>
  <div class="children">58</div>
  <div class="children">59</div>
  <div class="children">60</div>
  <div class="children">61</div>
  <div class="children">62</div>
  <div class="children">63</div>
  <div class="children">64</div>
  <div class="children">65</div>
  <div class="children">66</div>
  <div class="children">67</div>
  <div class="children">68</div>
  <div class="children">69</div>
  <div class="children">70</div>
  <div class="children">71</div>
  <div class="children">72</div>
  <div class="children">73</div>
  <div class="children">74</div>
  <div class="children">75</div>
  <div class="children">76</div>
  <div class="children">77</div>
  <div class="children">78</div>
  <div class="children">79</div>
  <div class="children">80</div>
  <div class="children">81</div>
  <div class="children">82</div>
  <div class="children">83</div>
  <div class="children">84</div>
  <div class="children">85</div>
  <div class="children">86</div>
  <div class="children">87</div>
  <div class="children">88</div>
  <div class="children">89</div>
  <div class="children">90</div>
  <div class="children">91</div>
  <div class="children">92</div>
  <div class="children">93</div>
  <div class="children">94</div>
  <div class="children">95</div>
  <div class="children">96</div>
  <div class="children">97</div>
  <div class="children">98</div>
  <div class="children">99</div>
  <div class="children">100</div>

赞(0）回复(0）举报 2023-05-08

我来回答

css 使用第n个子元素，如何将一个方形父div的子元素划分为4个不同的样式区域？

1条答案

相关问题

热门标签

最新问答