按属性值划分的样式类（第 n 个子项）答案

【问题标题】：Style class by attribute value (nth-child)按属性值划分的样式类（第 n 个子项）
【发布时间】：2018-03-09 21:33:56
【问题描述】：

我想根据父数据属性中的值在类上附加样式。

就我而言，评分开始。

如果数据评级是针对 ex。 3、前三个开头应该填上颜色。

我认为 nth-child 可以解决问题，但我无法让它发挥作用..

这是我的html：

<div class="container">
    <div class="rating" data-rating="3">
        <span class="star" data-score='1'></span> /* Filled */
        <span class="star" data-score='2'></span> /* Filled */
        <span class="star" data-score='3'></span> /* Filled */
        <span class="star" data-score='4'></span>
        <span class="star" data-score='5'></span>
    </div>
</div>

我正在使用 sass。

谢谢！

【问题讨论】：

标签： html css sass

【解决方案1】：

Sass 是一个 CSS 生成器。 sass 和 html 之间没有像 js 和 html 那样的交互。因此，sass 不可能进入 html 内部并获取属性值。

您需要的是 js/jquery 解决方案。

例如：$(".star:nth-child(-n+"+$(".rating").attr("data-rating")+")").css("background","red")

【讨论】：

不一定：您可以在 SASS 中使用@for 循环来生成所有选择器以针对每个可能的评级。输出会很冗长，但使用 gzip 压缩和 CSS 缩小并不算太糟糕......除非我们谈论的是 1000 星评级；）
好吧，如果你不想为一件事最终得到 50 个选择器，我认为 jquery 更好。这可能不是他唯一想要那种东西的东西。正确的方法是巧妙地做到这一点，不会溢出你的 css 文件。

【解决方案2】：

由于 CSS 对从 data- 属性读取值的支持仍然非常有限，因此您不能依靠读取 data-rating 来动态应用 :nth-child 规则。但是，由于您使用的是 CSS 预处理器（如您提到的 SASS），您可以使用 @for loop 来生成所需的所有必要选择器。此解决方案需要注意的是，您需要预先确定最大评级（在本例中为5）。

下面的 SASS 代码（也称为 available as a gist）将或多或少地完成您打算实现的目标。对于select for the first x elements，您可以使用:nth-child(-n+x) 选择器规则。

使用 SASS @for 循环遍历所有可能的星级（1 到 x，其中 x 在您的情况下为 5）
生成一个以.rating[data-rating='x']为目标的选择器
在每个 .rating 选择器中，您可以使用上面的 nth-child 技巧来设置第一个 x 星的样式。

// Some basic configuration
$stars: 5;
$star-color: #FFD464;

// Baes styles for unfilled stars
.rating {
  .star {
    color: #ccc;
  }
}

// Create custom nth-child selectors for each data-rating value
@for $i from 1 through $stars {
  .rating[data-rating='#{$i}'] {
    .star:nth-child(-n+#{$i}) {
      color: $star-color;
    }
  }
}

免责声明：这种方法的唯一主要缺点是当你有太多星星时它会很快变得臃肿。拥有 5 颗星不是问题，因为您只会生成 5 组不同的规则（加上 gzipping 和 CSS 缩小的优势，代码膨胀不会产生沉重的开销）。想象一下，如果您有一个 10 星评级系统，选择器规则将过于冗长：在这种情况下，您可能需要考虑基于 JS 的解决方案。

这是一个使用上面已编译的 SASS 代码的概念验证示例：

.rating .star {
  color: #ccc;
}

.rating[data-rating='1'] .star:nth-child(-n+1) {
  color: #FFD464;
}

.rating[data-rating='2'] .star:nth-child(-n+2) {
  color: #FFD464;
}

.rating[data-rating='3'] .star:nth-child(-n+3) {
  color: #FFD464;
}

.rating[data-rating='4'] .star:nth-child(-n+4) {
  color: #FFD464;
}

.rating[data-rating='5'] .star:nth-child(-n+5) {
  color: #FFD464;
}

<div class="container">
    <div class="rating" data-rating="1">
        <span class="star" data-score='1'>&#9733;</span>
        <span class="star" data-score='2'>&#9733;</span>
        <span class="star" data-score='3'>&#9733;</span>
        <span class="star" data-score='4'>&#9733;</span>
        <span class="star" data-score='5'>&#9733;</span>
    </div>
    <div class="rating" data-rating="2">
        <span class="star" data-score='1'>&#9733;</span>
        <span class="star" data-score='2'>&#9733;</span>
        <span class="star" data-score='3'>&#9733;</span>
        <span class="star" data-score='4'>&#9733;</span>
        <span class="star" data-score='5'>&#9733;</span>
    </div>
    <div class="rating" data-rating="3">
        <span class="star" data-score='1'>&#9733;</span>
        <span class="star" data-score='2'>&#9733;</span>
        <span class="star" data-score='3'>&#9733;</span>
        <span class="star" data-score='4'>&#9733;</span>
        <span class="star" data-score='5'>&#9733;</span>
    </div>
    <div class="rating" data-rating="4">
        <span class="star" data-score='1'>&#9733;</span>
        <span class="star" data-score='2'>&#9733;</span>
        <span class="star" data-score='3'>&#9733;</span>
        <span class="star" data-score='4'>&#9733;</span>
        <span class="star" data-score='5'>&#9733;</span>
    </div>
    <div class="rating" data-rating="5">
        <span class="star" data-score='1'>&#9733;</span>
        <span class="star" data-score='2'>&#9733;</span>
        <span class="star" data-score='3'>&#9733;</span>
        <span class="star" data-score='4'>&#9733;</span>
        <span class="star" data-score='5'>&#9733;</span>
    </div>
</div>

更好：使用伪元素更改星形字形

如果您想为填充和未填充的星星使用不同的字形，这也是可能的。您只需使用::before（或::after）伪元素有条件地注入正确的字形（\2605 用于填充星，\2606 用于空星），再次使用与上述相同的迭代逻辑：

// Some basic configuration
$stars: 5;
$star-color: #FFD464;
$stars-filled: "\2605";
$stars-empty: "\2606";

// Baes styles for unfilled stars
.rating {
  .star {
    color: #ccc;
    &::before {
      content: $stars-empty;
    }
  }
}

// Create custom nth-child selectors for each data-rating value
@for $i from 1 through $stars {
  .rating[data-rating='#{$i}'] {
    .star:nth-child(-n+#{$i}) {
      color: $star-color;

      &::before {
        content: $stars-filled;
      }
    }
  }
}

@charset "UTF-8";
.rating .star {
  color: #ccc;
}
.rating .star::before {
  content: "☆";
}

.rating[data-rating='1'] .star:nth-child(-n+1) {
  color: #FFD464;
}
.rating[data-rating='1'] .star:nth-child(-n+1)::before {
  content: "★";
}

.rating[data-rating='2'] .star:nth-child(-n+2) {
  color: #FFD464;
}
.rating[data-rating='2'] .star:nth-child(-n+2)::before {
  content: "★";
}

.rating[data-rating='3'] .star:nth-child(-n+3) {
  color: #FFD464;
}
.rating[data-rating='3'] .star:nth-child(-n+3)::before {
  content: "★";
}

.rating[data-rating='4'] .star:nth-child(-n+4) {
  color: #FFD464;
}
.rating[data-rating='4'] .star:nth-child(-n+4)::before {
  content: "★";
}

.rating[data-rating='5'] .star:nth-child(-n+5) {
  color: #FFD464;
}
.rating[data-rating='5'] .star:nth-child(-n+5)::before {
  content: "★";
}

<div class="container">
    <div class="rating" data-rating="1">
        <span class="star" data-score='1'></span>
        <span class="star" data-score='2'></span>
        <span class="star" data-score='3'></span>
        <span class="star" data-score='4'></span>
        <span class="star" data-score='5'></span>
    </div>
    <div class="rating" data-rating="2">
        <span class="star" data-score='1'></span>
        <span class="star" data-score='2'></span>
        <span class="star" data-score='3'></span>
        <span class="star" data-score='4'></span>
        <span class="star" data-score='5'></span>
    </div>
    <div class="rating" data-rating="3">
        <span class="star" data-score='1'></span>
        <span class="star" data-score='2'></span>
        <span class="star" data-score='3'></span>
        <span class="star" data-score='4'></span>
        <span class="star" data-score='5'></span>
    </div>
    <div class="rating" data-rating="4">
        <span class="star" data-score='1'></span>
        <span class="star" data-score='2'></span>
        <span class="star" data-score='3'></span>
        <span class="star" data-score='4'></span>
        <span class="star" data-score='5'></span>
    </div>
    <div class="rating" data-rating="5">
        <span class="star" data-score='1'></span>
        <span class="star" data-score='2'></span>
        <span class="star" data-score='3'></span>
        <span class="star" data-score='4'></span>
        <span class="star" data-score='5'></span>
    </div>
</div>

【讨论】：

@Glidarn 不客气。如果您想为星星使用不同的字形，我已经更新了另一个示例：)

【解决方案3】：

你可以试试这个。

这部分 sass 代码就是你所需要的。 CODEPEN

 @for $i from 1 through 5 {
  .rating[data-rating="#{$i}"] {
      .fa-star:nth-child(-n+#{$i}) {
          color: yellow;
      }
  }
}

查看已编译的 CSS 和完整代码。

body {
  background: #333;
}

.container {
  margin: 25px 50px;
}

.rating[data-rating="1"] .fa-star:nth-child(-n+1) {
  color: yellow;
}

.rating[data-rating="2"] .fa-star:nth-child(-n+2) {
  color: yellow;
}

.rating[data-rating="3"] .fa-star:nth-child(-n+3) {
  color: yellow;
}

.rating[data-rating="4"] .fa-star:nth-child(-n+4) {
  color: yellow;
}

.rating[data-rating="5"] .fa-star:nth-child(-n+5) {
  color: yellow;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<!--  When data rating is 3 -->
<div class="container">
    <div class="rating" data-rating="3">
        <span class="fa fa-star" data-score='1'></span> 
        <span class="fa fa-star" data-score='2'></span> 
        <span class="fa fa-star" data-score='3'></span> 
        <span class="fa fa-star" data-score='4'></span>
        <span class="fa fa-star" data-score='5'></span>
    </div>
</div>

<!--  When data rating is 2 -->
<div class="container">
    <div class="rating" data-rating="2">
        <span class="fa fa-star" data-score='1'></span> 
        <span class="fa fa-star" data-score='2'></span> 
        <span class="fa fa-star" data-score='3'></span> 
        <span class="fa fa-star" data-score='4'></span>
        <span class="fa fa-star" data-score='5'></span>
    </div>
</div>


<!--  When data rating is 1 -->
<div class="container">
    <div class="rating" data-rating="1">
        <span class="fa fa-star" data-score='1'></span> 
        <span class="fa fa-star" data-score='2'></span> 
        <span class="fa fa-star" data-score='3'></span> 
        <span class="fa fa-star" data-score='4'></span>
        <span class="fa fa-star" data-score='5'></span>
    </div>
</div>

【讨论】：