Question

我只想选择第一个标签，但是我不确定如何选择。我尝试了第一个孩子和第一个类型，但是所有a元素都被选中。因为它有很多外部元素，这有可能吗？谢谢！

    <section class="contact">
        <div class="container">
            <h1 class="heading">contact</h1>
            <div class="row">
                <div class="text">
                    <div>
                        <i class="iconLocation"></i>
                        <div>
                            <h3>Location</h3>
<!--                           this is the a tag i want to select-->
                            <p>dfadsf<a href="#">this is the p i want to select</a></p>
                        </div>
                    </div>
                    <div>
                        <i class="iconPhone"></i>
                        <div>
                            <h3>Phone</h3>
                            <p>dfasdf<a href="tel:1111">1111</a></p>
                        </div>
                    </div>
                    <div>
                        <i class="iconEnvelope"></i>
                        <div>
                            <h3>Email</h3>
                            <p>fdadfas<a href="#">djfakljsdf@gmail.com</a></p>
                        </div>
                    </div>
                    <div>
                        <i class="iconClock"></i>
                        <div>
                            <h3>Hours</h3>
                            <p>Monday - Friday: 8AM - 8PM</p>
                            <p>Saturday and Sunday: 4AM - 8PM</p>
                        </div>
                    </div>
                </div>
                <div class="image">
                    <img src="">
                </div>
            </div>
        </div>
    </section>

Answer 1

问题出在目标<p>标签的祖父母；这是具有<div>个兄弟姐妹的通用<div>。因此，您需要将伪选择器 :first-of-type 链接到此，然后向下导航到<p>。您只需要.text div:first-of-type div p就能做到这一点，尽管您可能想要以下内容，它另外利用 child combinator > 来增加 specificity ：

.contact > .container > .row > .text > div:first-of-type > div > p {
  color: red;
}

<section class="contact">
  <div class="container">
    <h1 class="heading">contact</h1>
    <div class="row">
      <div class="text">
        <div>
          <i class="iconLocation"></i>
          <div>
            <h3>Location</h3>
            <!--this is the a tag i want to select-->
            <p>dfadsf<a href="#">this is the p i want to select</a></p>
          </div>
        </div>
        <div>
          <i class="iconPhone"></i>
          <div>
            <h3>Phone</h3>
            <p>dfasdf<a href="tel:1111">1111</a></p>
          </div>
        </div>
        <div>
          <i class="iconEnvelope"></i>
          <div>
            <h3>Email</h3>
            <p>fdadfas<a href="#">djfakljsdf@gmail.com</a></p>
          </div>
        </div>
        <div>
          <i class="iconClock"></i>
          <div>
            <h3>Hours</h3>
            <p>Monday - Friday: 8AM - 8PM</p>
            <p>Saturday and Sunday: 4AM - 8PM</p>
          </div>
        </div>
      </div>
      <div class="image">
        <img src="">
      </div>
    </div>
  </div>
</section>

如何使用CSS仅选择具有7个外部元素的第一个元素

1 个答案: