Question

当我试图通过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>

Answer 1

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

您的CSS上的

widget_ci_latest-posts -之后_ ci应为names。

Answer 3

您使用的是错误的类名。您的类名为widget_ci_latest-posts，您使用.widget_ci-latest-posts作为选择器。检查下划线。

第一胎选择不起作用

3 个答案: