主页 / 问题 / 1113055
Accepted
EgorG
Asked:2020-04-20 21:55:26 +0000 UTC2020-04-20 21:55:26 +0000 UTC

css伪类问题

  • 772

您能否告诉我是否可以从伪类组成一个选择器，从而不使用类来为该布局中的每个 SECOND span 标签设置不同的样式（两种不同的颜色）？

<div className="weather-card__min-max">
   <div className="min__container">
     <span>0</span>
     <span>Min</span>
   </div>
   <div className="max__container">
     <span>4</span>
     <span>Max</span>
   </div>  
 </div>

我使用 scss 并这样写：

.weather-card__min-max {
  //какой-то код//

  .min__container, .max__container {
  // И тут должно быть два стиля для каждого второго <span>

  }
}
css

2 个回答

  1. Best Answer

    在 CSS 上：

    .weather-card__min-max .min__container:nth-child(2n-1) span:nth-child(2n),
.weather-card__min-max .max__container:nth-child(2n-1) span:nth-child(2n) {
    color: red;
}

.weather-card__min-max .min__container:nth-child(2n) span:nth-child(2n),
.weather-card__min-max .max__container:nth-child(2n) span:nth-child(2n) {
    color: blue;
}
    <div class="weather-card__min-max">
    <div class="min__container">
        <span>0</span>
       <span>Min</span>
    </div>
    <div class="max__container">
       <span>4</span>
       <span>Max</span>
    </div>  
</div>

    在 SCSS/Less 上：

    .weather-card__min-max {
    .min__container, .max__container {
        &:nth-child(2n-1) {
            span:nth-child(2n){
                color: red;
            }
        }
        &:nth-child(2n) {
            span:nth-child(2n){
                color: blue;
            }
        }
    }
}
    • 1 
  2. .weather-card__min-max > div > 
span:nth-child(2n){
color:цвет;
}
    • 0

相关问题