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

Question

我正在尝试选择我的

span

中的每个人

.card--container

，但我无法做到这一点。我已经尝试过

: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.

/// 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 链接

Answer 2

要针对每个跨度，最好的办法是为每个跨度添加一个 ID，然后如果您希望它们都不同，则向该 ID 添加样式，如下所示：

<span id="grey">Grey</span>

#grey {
   color: #808080;
}

或者针对每个跨度并让它们继承您可以执行的相同样式：

.card span {
   color: #808080;
}

Answer 3

您使用是对的

:nth-of-type

：

.card-container li:nth-of-type(1) span {color: pink;}
.card-container li:nth-of-type(2) span {color: gray;}
.card-container li:nth-of-type(3) span {color: green;}

Answer 4

就这么简单：

.card--container span{
<!-- CSS RULES-->
}