css 第 n 个 child :after - flip image horizontally

Question

我正在尝试获取一个 :after 元素，它是一个图像框架，并水平翻转一组 3 个中的第二个。

这是我当前的 CSS:

.photo-frame { 
  position: relative; 
  width: 354px; 
  height: 244px; 
}
.photo-frame:after { 
  content: ''; 
  position: absolute; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0; 
  display: block; 
  width: 354px; 
  height: 244px; 
  background: url(images/photo-frame.png) no-repeat 0 0; 
}
.photo-frame img { 
  display: block; 
  margin: 0 auto; 
}
.photo-frame:nth-child(2):after {
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}

HTML:

<div class="shell">
  <div class="section-body">
    <ul>
      <li>
        <a href="#">
          <div class="photo-frame">
            <img width="354" height="244" src="/uploads/2014/10/dierks-354x244.jpg" class="attachment-photo-image" alt="dierks" />
          </div><!-- /.photo-frame -->
        </a>
          <div class="top-section-img-title">
            <strong>
              <a href="#">ARTIST NAME</a>
            </strong>
          </div>
      </li>

      <li>
        <a href="#">
          <div class="photo-frame">
            <img width="354" height="244" src="/uploads/2014/10/carrie-354x244.jpg" class="attachment-photo-image" alt="carrie" />
          </div><!-- /.photo-frame -->
        </a>
        <div class="top-section-img-title">
          <strong>
            <a href="#">ARTIST NAME</a>
          </strong>
        </div>
      </li>

      <li>
        <a href="#">
          <div class="photo-frame">
            <img width="354" height="244" src="/uploads/2014/10/luke-354x244.jpg" class="attachment-photo-image" alt="luke" />
          </div><!-- /.photo-frame -->
        </a>
        <div class="top-section-img-title">
          <strong>
            <a href="#">ARTIST NAME</a>
          </strong>
        </div>
      </li>
    </ul>

    <div class="more">
      <a href="#">VIEW FULL LINEUP HERE</a>
    </div><!-- /.more -->
  </div><!-- /.section-body -->
</div><!-- /.shell -->

但是它不起作用。 我对这个第 n 个子选择器魔法还很陌生。你们能帮帮我吗？

Answer 1

问题是 .photo-frame 是每个 li 中的独生子，因此您的选择器不匹配任何内容。您还应该知道 :nth-child() 只选择元素，而不是类或 ID，就像您目前正在尝试的那样。

因为 li 是子元素，并且是每个 .photo-frame 的祖先，所以我建议使用 :nth-child() 而不是选择您想要设置样式的 .相框:

li:nth-child(2) .photo-frame:after {
    /* ... */
}