html - CSS 选择器 - 如何单独选择容器内的跨度？

Question

我试图在我的 .card--container 中选择每个单独的 span 但我无法做到这一点。我试过 :nth-of-type :nth-child，但我遗漏了一些重要的东西。

这是一个codepen

这是我的内联代码。

<ul class="card--container">
  <li class="card">
    <header class="card__header">
      <h1>
        <a href="" class="card__link">Repo Title</a>
      </h1>
      <span>Pink</span>
    </header>
    <p class="card__content">Repo Content</p>
    <footer class="card__footer">Footer</footer>
  </li>

  <li class="card">
    <header class="card__header">
      <h1>
        <a href="" class="card__link">Repo Title</a>
      </h1>
      <span>Gray</span>
    </header>
    <p class="card__content">Repo Content</p>
    <footer class="card__footer">Footer</footer>
  </li>

  <li class="card">
    <header class="card__header">
      <h1>
        <a href="" class="card__link">Repo Title</a>
      </h1>
      <span>Green</span>
    </header>
    <p class="card__content">Repo Content</p>
    <footer class="card__footer">Footer</footer>
  </li>
</ul>

<p>Comment out <code>animation:sideLeft</code> and add <code>opacity: 1</code> on the <code>.card</code> to make debug easier. Thanks for the help!!!!</p>

/// Mixins
/// @name Size Mixin
/// @param { Number } $width - Width
/// @param { Number } $height - $width
@mixin size($width, $height: $width) {
  width: $width;
  height: $height;
}

@mixin keyframes($name) {
    @keyframes #{$name} {
      @content;
    }
}


/// @name Flex Mixin
/// @param { String } $flow 
/// @param { String } $justify
/// @param { String } $alingnment
@mixin display-flex($args...) {
  display: flex;
  flex-flow: nth($args, 1); /*1*/
  justify-content: nth($args, 2); /*2*/
  align-items: nth($args, 3); /*3*/
}


/// Variables
$gray: hsla(0, 0%, 88.6%, 1);
$black: hsla(0, 0%, 0%, 1);
$white: hsla(0, 0%, 100%, 1);
$blue: hsla(300, 47%, 75%, 1);
$yellow: hsla(60, 46.9%, 74.9%, 1);

$color-primary: hsla(300, 47%, 75%, 1); /* #dda1dd */
$color-secondary: hsla(150, 47%, 75%, 1); /* #a1ddbf */

body, html {
  background: $white;
  width: 100vw;
  height: 100vh;
  border: 1px solid $color-primary;
};

p {
  font-size: 1.5rem;
  text-align: center;
  color: $color-primary;
}

.card--container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  @include size(90vw, 500px);
  border: 2px solid $gray;
  list-style: none;
  margin: 0 auto;
}

.card {
  @include display-flex(column, space-around, stretch);
  @include size(400px, 150px);
  opacity: 0;
  border: 2px solid $gray;
  border-radius: 10px;
  box-shdow: 3px 3px 3px 5px $gray;
  @include keyframes(slideLeft) {
    0% {
      transform: translateX(1500px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }
  @for $i from 0 through 4 {
    &:nth-child(#{$i}) {
      animation: slideLeft;
      animation-duration: 1s + ($i * 400ms);
      animation-iteration-count: 1;
      animation-delay: 1.5s + ($i * 400ms);
      animation-fill-mode: forwards;
    } 
  }

  &__header {
    @include display-flex(row, space-around, center);
    flex-basis: 25%;

     h1 {
      @include size(90%);
      letter-spacing: 0.1rem;
    }

     span {  /* ERROR Here Will like to select each individual span */
      @include size(15px, 15px);
      border-radius: 100%;
      background-color: $color-primary;
      text-align: center;      
    }
  }

  &__link {
    color: $gray;
    text-decoration: none;
    font-size: 1em;
  }

  &__content {
    color: $gray;
    font-size: 2em;
    flex-basis: 50%;
    text-align: center; 
  }


  &__footer {
    @extend .card__header;
    color: $gray;
  }
}

Answer 1

要对每个跨度应用不同 样式，您实际上可以使用:nth-of-type(n) 伪选择器来选择它们。你必须记住的是这个伪选择器不能用在类上，所以它会取元素而不是它。幸运的是，这个元素 (li) 在您的案例中是独一无二的。

.card--container {
    li:nth-of-type(1) span {
        background-color: #F00;
    }
    li:nth-of-type(2) span {
        background-color: #0F0;
    }
    li:nth-of-type(3) span {
        background-color: #00F;
    }
}

我已经用一个工作示例更新了你的代码笔，

Codepen link