Question

我需要将其他元素中的第一个元素作为目标，但不知怎的，它不能正常工作。

我只想定位侧栏中的第一个h2。

我该怎么做？

我尝试使用first-child和nth-of-type，但它无效。

＆＃13;

#sidebar h2:first-child {
  color: blue;
}

＆＃13;

<div id="sidebar">
  <div class="right">
    <div class="container-right">
      <div class="freetext">
        <h2>Heading - target me only</h2>
        <p>Text</p>
      </div>
      <div class="freetext">
        <h2>Heading</h2>
        <p>Text</p>
      </div>
    </div>
  </div>
</div>

＆＃13;

请在此处查看fiddle。

Answer 1

这将完成这项工作。

＆＃13;

#sidebar .freetext:first-child h2 {
    color: blue;
}

＆＃13;

<div id="sidebar">
    <div class="right">
        <div class="container-right">
            <div class="freetext">
                <h2>Heading - target me only</h2>
                <p>Text</p>
            </div>
            <div class="freetext">
                <h2>Heading</h2>
                <p>Text</p>
            </div>
        </div>
    </div>
</div>

＆＃13;

Answer 2

您需要定位first-child的父div的{{1}}。

h2

或者：

#sidebar > div > div > div:first-child > h2 {
    color: blue;
}

jsFiddle here

目标：第一个孩子或：第n个类型（1）

2 个答案: