文章/答案/技术大牛

发布

社区首页 >问答首页 >在nth-child中应用CSS到nth-child

问在nth-child中应用CSS到nth-child
EN

Stack Overflow用户

提问于 2018-02-20 10:18:12

回答 4查看 2.7K关注 0票数 3

有没有可能在第n个孩子中增加造型？

我正在编制一份学生名单(15名学生)，前5名学生的名字将变成绿色，然后6-10是橙色的，11-15是红色的。

这就像将CSS应用于项目的范围一样。

我找不到相关的问题。

希望你能理解我。

谢谢。

ol li:first-child{
  color: green;
}
ol li:nth-child(2), ol li:nth-child(3), ol li:nth-child(4), ol li:nth-child(5){
  color: green;
}
ol li:nth-child(6), ol li:nth-child(7), ol li:nth-child(8), ol li:nth-child(9), ol li:nth-child(10){
  color: orange;
}
ol li:nth-child(11), ol li:nth-child(12), ol li:nth-child(13), ol li:nth-child(14), ol li:nth-child(15){
  color: red;
}

<ol>
  <li>student1</li>
  <li>student2</li>
  <li>student3</li>
  <li>student4</li>
  <li>student5</li>
  <li>student6</li>
  <li>student7</li>
  <li>student8</li>
  <li>student9</li>
  <li>student10</li>
  <li>student11</li>
  <li>student12</li>
  <li>student13</li>
  <li>student14</li>
  <li>student15</li>
</ol>

css

css-selectors

回答 4

Stack Overflow用户

回答已采纳

发布于 2018-02-20 10:24:36

这就是你想要的？

在第一个css -n+5中，由于negetive，在5th元素之前选择前五个元素。如果删除negetive，它将选择所有具有第5个元素的元素。因此，再次为元素11至15添加了n+11。

如果不想在第15个元素之后添加.second，则可以使用css。

.first p:nth-child(-n+5) {
  color: green;
}

.first p:nth-child(n + 5) {
  color: orange;
}

.first p:nth-child(n + 11) {
  color: red;
}

.second {
  margin-top: 50px;
}

.second p:nth-child(-n+5) {
  color: green;
}

.second p:nth-child(n + 6):nth-child(-n + 10) {
  color: orange;
}

.second p:nth-child(n + 11):nth-child(-n + 15) {
  color: red;
}

<div class="first">
  <p>Student 1</p>
  <p>Student 2</p>
  <p>Student 3</p>
  <p>Student 4</p>
  <p>Student 5</p>
  <p>Student 6</p>
  <p>Student 7</p>
  <p>Student 8</p>
  <p>Student 9</p>
  <p>Student 10</p>
  <p>Student 11</p>
  <p>Student 12</p>
  <p>Student 13</p>
  <p>Student 14</p>
  <p>Student 15</p>
</div>

<div class="second">
  <p>Student 1</p>
  <p>Student 2</p>
  <p>Student 3</p>
  <p>Student 4</p>
  <p>Student 5</p>
  <p>Student 6</p>
  <p>Student 7</p>
  <p>Student 8</p>
  <p>Student 9</p>
  <p>Student 10</p>
  <p>Student 11</p>
  <p>Student 12</p>
  <p>Student 13</p>
  <p>Student 14</p>
  <p>Student 15</p>
  <p>Student 16</p>
  <p>Student 17</p>
</div>

票数 6

Stack Overflow用户

发布于 2018-02-20 10:32:22

您可以使用CSS子区域来实现解决方案。

您的风格如下所示

li:nth-child(n+4):nth-child(-n+8) {
  background: #298EB2;
}

li {
  width: 20px;
  height: 20px;
  background: red;
  margin: 5px;
  display: inline-block;
}

<div>
  <h3>Child Ranges</h3>
  <ul>
    <li><span></span></li>
    <li><span></span></li>
    <li><span></span></li>
    <li><span></span></li>
    <li><span></span></li>
    <li><span></span></li>
    <li><span></span></li>
    <li><span></span></li>
    <li><span></span></li>
    <li><span></span></li>
    <li><span></span></li>
  </ul>
</div>

工作演示

如果您想了解更多关于nth-child的信息，可以访问本网站http://nthmaster.com/。

票数 4

Stack Overflow用户

发布于 2018-02-20 10:26:27

洗劫一下这段代码。根据你的要求。

ul li{
 margin-bottom: 2px;
}
ul li:nth-child(n+1):nth-child(-n+5) {
  background: #2e8209;
}
ul li:nth-child(n+6):nth-child(-n+10) {
  background: #eb7436;
}
ul li:nth-child(n+11):nth-child(-n+15) {
  background: #b10a0a;
}

<ul>
            <li>Child 1</li>
            <li>Child 2</li>
            <li>Child 3</li>
            <li>Child 4</li>
            <li>Child 5</li>
            <li>Child 6</li>
            <li>Child 7</li>
            <li>Child 8</li>
            <li>Child 9</li>
            <li>Child 10</li>
            <li>Child 11</li>
            <li>Child 12</li>
            <li>Child 13</li>
            <li>Child 14</li>
            <li>Child 15</li>
          </ul>

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/48882873

复制

相似问题

问在nth-child中应用CSS到nth-child
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在nth-child中应用CSS到nth-childEN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在nth-child中应用CSS到nth-child
EN