在这种情况下如何使用 CSS 选择器选择 H5 的子项？ [复制]

Question

我正在为我的目标网页设计步骤 1、2、3。在这种情况下，我使用引导框架。

我想要的只是将第 1 步和第 3 步的文本向下移动一点，但让第 2 步保持正常。

.steps:.step:first-child:last-child h5 {
  margin-top: 25px;
}
.step {
  padding-left: 130px;
  padding-top: 12px;
  padding-bottom: 25px;
  background-color: black;
  height: 110px;
  border: 2px solid #62a9af;
  border-radius: 60px 0px;
}
.step .number {
  position: absolute;
  top: 14px;
  left: 25px;
  font-family: "Oswald", sans-serif;
  color: #ffbe01;
  font-size: 4em;
  line-height: 1.4em;
  text-align: center;
  width: 1.5em;
  height: 1.5em;
  background-color: rgba(98, 169, 175, 0.25);
  border-radius: 50%;
}
.step h5 {
  font-family: "Oswald", sans-serif;
  font-size: 2em;
  color: white;
  font-weight: 500;
  text-transform: uppercase;
}
.steps {
  margin-top: 10px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<section class="steps">
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-12">
        <div class="row">
          <div class="col-xs-12 col-sm-offset-3 col-sm-7 col-md-offset-0 col-md-4">
            <div class="step">
              <div class="number">1</div>
              <h5>REGÍSTRATE</h5>
              <p></p>
            </div>
          </div>
          <div class="col-xs-12 col-sm-offset-3 col-sm-7 col-md-offset-0 col-md-4">
            <div class="step">
              <div class="number">2</div>
              <h5>SIGUE LAS INSTRUCCIONES</h5>
              <p></p>
            </div>
          </div>
          <div class="col-xs-12 col-sm-offset-3 col-sm-7 col-md-offset-0 col-md-4">
            <div class="step">
              <div class="number">3</div>
              <h5>¡JUEGA!</h5>
              <p></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

我的Codepen

Answer 1

我认为这不是解决您面临的问题的最佳方法，我认为您应该使用 flexbox，它的响应速度更快。这是我的代码。

* {
  font-family: Oswald, sans-serif;
}
.step {
  background-color: #000;
  height: 110px;
  border: 2px solid #62a9af;
  border-radius: 60px 0;
  display: flex;
  align-items: center;
}
.step .number {
  color: #ffbe01;
  font-size: 4em;
  line-height: 1.4em;
  text-align: center;
  width: 1.5em;
  height: 1.5em;
  background-color: rgba(98, 169, 175, .25);
  border-radius: 50%;
  margin: 15px;
}
.step h5 {
  font-size: 2em;
  color: #fff;
  font-weight: 500;
  text-transform: uppercase;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<section class="steps">
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-12">
        <div class="row">
          <div class="col-xs-12 col-sm-offset-3 col-sm-7 col-md-offset-0 col-md-4">
            <div class="step">
              <div class="number">1</div>
              <h5>REGÍSTRATE</h5>
              <p></p>
            </div>
          </div>
          <div class="col-xs-12 col-sm-offset-3 col-sm-7 col-md-offset-0 col-md-4">
            <div class="step">
              <div class="number">2</div>
              <h5>SIGUE LAS INSTRUCCIONES</h5>
              <p></p>
            </div>
          </div>
          <div class="col-xs-12 col-sm-offset-3 col-sm-7 col-md-offset-0 col-md-4">
            <div class="step">
              <div class="number">3</div>
              <h5>¡JUEGA!</h5>
              <p></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

我稍微简化了您的 CSS，并更改了添加号码的方式。您会注意到 display: flex; 和 align-items: center; 现在位于 .step 中，这意味着 .step 中的所有内容都位于垂直中心。

现在每个步骤中的文本无论占用多少行都会显得居中。

我希望这会有所帮助。

Answer 2

只需为 2 个步骤添加一个 id：

HTML：

<h5 id="heightdown">REGÍSTRATE</h5>
<h5 id="heightdown">¡JUEGA!</h5>

CSS：

#heightdown {
     padding-top: 5px;
}