时间戳

首页 > 解决方案 > 在每个类上使用 nth-of-type 选择元素，除了多个 div 中的第一个和最后一个

html - 在每个类上使用 nth-of-type 选择元素，除了多个 div 中的第一个和最后一个

问题描述

我正在尝试can_name在卡片中选择类来更改文本的颜色。但是在尝试选择正确的 can_name 时遇到问题。我什至不能选择第一个使用.can_name:nth-child(1)或者.can_name:nth-of-type(1)

作为测试/调试，我尝试了

.race.candidate .can_name:nth-of-type(1) {
 color:yellow;
}

为了能够查看我是否可以只针对第一个 .can_name，但由于某种原因，它针对并将黄色更改为所有 .can_name 类。

这是下面的完整页面代码：

<!-- Card #1 -->
<div class="card-body card">
<!-- Within in card #1 Person #1 -->
<div class="race candidate">
    <div class="content">
      <div class="row">
        <div class="col">
          <div class="can_name">
            <h5><a>Person 1</a></h5>
                <span class="text-muted">Party</span>
              </div>
          </div>
      </div>
    </div>
    </div>
<!-- Within in card #1 Person #2 -->
<div class="race candidate">
    <div class="content">
      <div class="row">
        <div class="col">
          <div class="can_name">
            <h5><a>Person 2</a></h5>
                <span class="text-muted">Party</span>
              </div>
          </div>
      </div>
    </div>
    </div>

    </div>

<!-- Card #2 -->
<div class="card-body card">

<!-- Within in card #2 Person #1 -->
<div class="race candidate">
    <div class="content">
      <div class="row">
        <div class="col">
          <div class="can_name">
            <h5><a>Person 1</a></h5>
                <span class="text-muted">Party</span>
              </div>
          </div>
      </div>
    </div>
    </div>
<!-- Within in card #2 Person #2 -->
<div class="race candidate">
    <div class="content">
      <div class="row">
        <div class="col">
          <div class="can_name">
            <h5><a>Person 2</a></h5>
                <span class="text-muted">Party</span>
              </div>
          </div>
      </div>
    </div>
    </div>
<!-- Within in card #2 Person #3 -->
<div class="race candidate">
    <div class="content">
      <div class="row">
        <div class="col">
          <div class="can_name">
            <h5><a>Person 3</a></h5>
                <span class="text-muted">Party</span>
              </div>
          </div>
      </div>
    </div>
    </div>
    </div>

<!-- Card #3     -->
<div class="card-body card">
<!-- Within in card #3 Person #1 -->
<div class="race candidate">
    <div class="content">
      <div class="row">
        <div class="col">
          <div class="can_name">
            <h5><a>Person 1</a></h5>
                <span class="text-muted">Party</span>
              </div>
          </div>
      </div>
    </div>
    </div>


    </div>

任何帮助将不胜感激

标签： htmlcss

解决方案

你的第一个暴风雨将所有东西都涂成黄色，因为 nth-type 是这样工作的：它为作为其父元素的.can_name第一个元素的每个元素指定背景颜色。.can_name如果你需要选择一张特定的卡，你需要使用类似的东西 .race.candidate:nth-child(1) .can_name

推荐阅读