第一胎选择无效

Ashish 发表于 Dev

阿什什

我试图通过callig css：first-child属性选择第一篇文章的img，但未选择。我用过.widget_ci-latest-posts文章：第一个孩子，但它没有选择。

<aside class="widget_ci_latest-posts">
<h2>test</h2>
<article class="item">
   <figure class="item-thumb">
       <a><img class="x" src="" /></a>
   </figure>
</article>

<article class="item">
   <figure class="item-thumb">
       <a><img class="x" src="" /></a>
   </figure>
</article>

<article class="item">
   <figure class="item-thumb">
       <a><img class="x" src="" /></a>
   </figure>
</article>
</aside>

内纳德·弗拉卡（Nenad Vracar）

要选择第一个，article您应使用first-of-type()而不是，first-child因为第一个孩子是h2not元素article。

.widget_ci_latest-posts article:first-of-type img  {
  border: 5px solid black;
}

<aside class="widget_ci_latest-posts">
  <h2>test</h2>
  <article class="item">
    <figure class="item-thumb">
      <a><img class="x" src="lorem" /></a>
    </figure>
  </article>

  <article class="item">
    <figure class="item-thumb">
      <a><img class="x" src="lorem" /></a>
    </figure>
  </article>

  <article class="item">
    <figure class="item-thumb">
      <a><img class="x" src="lorem" /></a>
    </figure>
  </article>
</aside>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。