Question

我正在尝试仅选择一个具有相同名称的类，我不知道如何仅选择一个相同类，因为它会一直选择所有类。

我只是停留在这一点上，当有相同的命名类时，我无法更改第一类。我尝试过单独选择它们，但是它们一直保持连接状态。

<main>
  <article>
    <section class="container description">
      <h3>Description</h3>
      <p>This peanut butter and jelly sandwich is my favorite sandwich. It has the perfect balance of ingredients and looks great when made right.</p>
    </section>

    <section class="container">
      <img src="https://image.flaticon.com/icons/png/512/63/63035.png" alt="sandwich" width="200" height="200">
      <h3>Ingredients</h3>
      <ul>
        <li>2 slices of white bread</li>
        <li>1 jar of grape jelly</li>
        <li>1 jar of creamy peanut butter</li>
        <li>A butter knife</li>
        <li>A sharp knife</li>
        <li>A cutting board</li>
      </ul>
    </section>

    <section class="container description">
      <h3>Directions</h3>
      <ol>
        <li>Lay both slices of bread next to each other on a cutting board.</li>
        <li>With the butter knife, spread a 1/8 inch layer of peanut butter on the left side</li>
        <li>On the right side, spread a 1/8 inch layer of jelly.</li>
        <li>Carefully place the two halves together so that the jelly is on top.</li>
        <li>With the sharp knife, carefully cut the sandwich in half.</li>
        <li>Enjoy the PB&amp;J!</li>
      </ol>
    </section>
  </article>
</main>

我希望第一部分的文本与中心对齐，但是第二部分.container.description必须保留在其位置而不改变它。

Answer 1

您可以使用如下所示的css3选择器。

/*This will select second section*/
    article .container:nth-child(2){
    background-color:#000;
    }

更多详细信息，请参见此link

重复类时如何只选择一个元素？

1 个答案: