将 nth-child 中的 CSS 应用于 nth-child答案

【问题标题】：Apply CSS in nth-child to nth-child将 nth-child 中的 CSS 应用于 nth-child
【发布时间】：2018-07-30 16:11:00
【问题描述】：

是否可以将样式添加到第 n 个孩子到第 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

【解决方案1】：

这就是你想要的？

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

如果您不想在第 15 个元素之后添加 css，可以使用 .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>

【讨论】：

您可以在代码中提供解释:)
是的..当然..让我解释一下
这可以工作，直到您可以覆盖样式。如果没有最后一个选择器，你所有的孩子都会是橙色

【解决方案2】：

您可以使用 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>

Working Demo

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

【讨论】：

【解决方案3】：

抢夺此代码。根据您的要求。

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>

【讨论】：

【解决方案4】：

<!DOCTYPE html>
<html>
<head>
<style> 

p:not(:nth-child(n+7)) {
    color: green;
}
</style>
</head>
<body>

<p>One</p>
<p>Two</p>
<p>Three</p>
<p>Four</p>
<p>Five</p>
<p>Six</p>
<p>Seven</p>
<p>Eight</p>

</body>
</html>

下面的代码只会为前五行提供绿色，假设 p 标签是你的类，

p:not(:nth-child(n+7)) {
color: green;

}

【讨论】：