Question

我试图拍摄一个：after元素，这是一个图像帧，并在水平方向上翻转第三个元素。

这是我现在的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()来定位它们，而不是选择。photo-frame你想要风格：

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

css nth child：after - 翻转图像水平

1 个答案: