html - CSS even nth-child 嵌套 img 问题

Question

我正在尝试使用 :nth-child(even) 技术来选择我页面上所有其他文章/元素中的图像，并最终将图像 float 在偶数文章中，使其与其他文章相对。

我将 Joomla 3 与 K2 一起使用，我知道这不会产生任何影响，但会解释臃肿的 HTML 和许多相互嵌套的 div。

这是我的代码片段:

HTML(2 篇文章/元素的片段):

    <!-- Start K2 Item Layout -->
    <div class="catItemView groupLeading">

    <!-- Plugins: BeforeDisplay -->

    <!-- K2 Plugins: K2BeforeDisplay -->

    <div class="catItemHeader">

          <!-- Item title -->
      <h3 class="catItemTitle">

                Copy of A Little Bit About Us...        
              </h3>

          </div>

  <!-- Plugins: AfterDisplayTitle -->

  <!-- K2 Plugins: K2AfterDisplayTitle -->


  <div class="catItemBody">

      <!-- Plugins: BeforeDisplayContent -->

      <!-- K2 Plugins: K2BeforeDisplayContent -->

          <!-- Item Image -->
      <div class="catItemImageBlock">
          <span class="catItemImage">
            <a href="/index.php/about/cni-solutions-overview/51-a-little-bit-about-us" title="Copy of A Little Bit About Us...">
                <img src="/media/k2/items/cache/eb6c7c01c4e98e1f2578f9959463b973_L.jpg" alt="Copy of A Little Bit About Us..." style="width:600px; height:auto;" />
            </a>
          </span>
      </div>

          <!-- Item introtext -->
      <div class="catItemIntroText">
        <h3>Experience, business continuity, quality support</h3>
    <p>Our team at CNi Solutions has over 18 years’ IT experience with a proven track record of success supporting small and medium sized businesses across the North West acting as a client’s IT department, or supplementing an existing IT function.</p>
    <p>We believe in helping our clients to improve business performance by leveraging well managed IT solutions, backed up by expert IT support services providing highly technical installation, virtualisation and disaster recovery solutions leading to improved technical performances.</p>
    <p>Our aim at CNi Solutions is to create long-term partnerships with our clients, maintaining value for money solutions through a combination of high quality support, expert IT project delivery and applicable strategic advice.</p>    </div>

        <div class="clr"></div>


    <div class="clr"></div>    



      <!-- Plugins: AfterDisplayContent -->

      <!-- K2 Plugins: K2AfterDisplayContent -->

      <div class="clr"></div>
  </div>


    <div class="clr"></div>


  <!-- Plugins: AfterDisplay -->

  <!-- K2 Plugins: K2AfterDisplay -->

    <div class="clr"></div>
</div>
<!-- End K2 Item Layout -->

            </div>
                        <div class="clr"></div>         

            <div class="itemContainer itemContainerLast" style="width:100.0%;">

<link rel="stylesheet" href="/templates/cni_solutions_purity_iii/html/com_k2/templates/about/about_style.css" type="text/css" />

<!-- Start K2 Item Layout -->
<div class="catItemView groupLeading">

    <!-- Plugins: BeforeDisplay -->

    <!-- K2 Plugins: K2BeforeDisplay -->

    <div class="catItemHeader">

          <!-- Item title -->
      <h3 class="catItemTitle">

                Copy of Here to Support You...      
              </h3>

          </div>

  <!-- Plugins: AfterDisplayTitle -->

  <!-- K2 Plugins: K2AfterDisplayTitle -->


  <div class="catItemBody">

      <!-- Plugins: BeforeDisplayContent -->

      <!-- K2 Plugins: K2BeforeDisplayContent -->

          <!-- Item Image -->
      <div class="catItemImageBlock">
          <span class="catItemImage">
            <a href="/index.php/about/cni-solutions-overview/50-here-to-support-you" title="Copy of Here to Support You...">
                <img src="/media/k2/items/cache/a522a6005d1cb428ea34ef1769cd7452_L.jpg" alt="Copy of Here to Support You..." style="width:600px; height:auto;" />
            </a>
          </span>
      </div>

          <!-- Item introtext -->
      <div class="catItemIntroText">
        <h3>Supporting your Computer Network Infrastructure</h3>
    <p>At CNi Solutions we believe that your Computer Network Infrastructure should be at the very heart of your business, but should not dictate the beat. CNi Solutions has been developed to provide you with full IT support, allowing you to focus on what is important - Developing and growing your business without the interruptions of an unsupported IT Infrastructure.</p>
    <p>We understand that your Computer Network Infrastructure needs to be tailored to suit your needs, whether you are a start-up business with one computer, looking for someone to call offering support and advice on your anti-virus and backup needs or a large company with more than one office looking for daily support and guidance on your growing IT demands.</p>    </div>

        <div class="clr"></div>


      <!-- Plugins: AfterDisplayContent -->

      <!-- K2 Plugins: K2AfterDisplayContent -->

      <div class="clr"></div>
  </div>

以此类推每篇文章/元素....

CSS:

    .catItemBody img {

  float: right;
  width: 35%;
  max-width: 400px;

}


.catItemBody:nth-child(even) img {

  float: left;
  width: 35%;
  max-width: 400px;

}

我可以使用上面的 css 定位 img 标签，因为它出现在元素检查器中，但它似乎选择了所有图像，而不仅仅是我想要的偶数文章/元素中的图像。

关于我哪里出错的任何想法？

网站页面目前在开发过程中位于此处:http://www.themanofice.co.uk/index.php/about/cni-solutions-overview

Answer 1

您的每个 .catItemBody 都是偶数:

<div class="catItemView groupLeading">
    <div class="catItemHeader"></div> /* This one is odd */
    <div class="catItemBody"></div> /* This one is even */
</div>
<div class="catItemView groupLeading">
    <div class="catItemHeader"></div> /* This one is odd */
    <div class="catItemBody"></div> /* This one is even, again */
</div>

因为第 n 个子节点是从最接近的上升项计算的，而不是从整个文档计算的。

您必须使选择器“更丑陋”:

.itemContainer:nth-of-type(even) .catItemBody img {}

除非没有其他图片，否则你可以使用

.itemContainer:nth-of-type(even) img {}

我正在使用 nth-of-type 而不是 nth-child，只是因为你有清除 div，所以每个 .itemContainer实际上很奇怪。

或者您可以为偶数项创建一个新类。