样式类按属性值（nth-child）

时间：2017-09-28 08:09:19

标签： html css sass

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

在我的情况下，评分开始。

如果数据评级是针对ex。 3，前三个开始应填充颜色。

我认为n-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。

THX！

3 个答案:

答案 0 :(得分：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)选择器规则。

  1. 使用SASS @for循环迭代所有可能的星级评分（1到x，其中x为5）
  2. 生成以.rating[data-rating='x']
    3. 为目标的选择器
  3. 在每个.rating选择器中，您使用上面的nth-child技巧设置第一个x星的样式。
    4. // 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>

答案 1 :(得分：2)

你可以试试这个。

您需要的所有sass代码。 CODEPEN 

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

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

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

Sass是一个css生成器。在js和html中，sass和html之间没有交互。所以从sass进入html并获取属性值是不可能的。

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

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

相关问题
最新问题