CSS 子选择器模式

Question

我已经构建了 flexbox 网格，并且想知道设置在某个点重复的结构或某种模式的最佳实践是什么。现在我正在使用 :nth-child 选择器。但我想避免数百个仅用于网格的选择器。

这是我制作的一个简单示例：

代码：

main {
  position: relative;
  margin: 0 auto 0 auto;
  width: 100%;
}

.row {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  align-content: flex-end;
}

.item {
  margin: 50px 20px;
  text-align: center;
  position: relative;
}

.item img {
  width: 100%;
}

.projectTitle {
  position: absolute;
  width: 95%;
  top: 100%;
}

.item:nth-child(1) {
  width: 26%;
}

.item:nth-child(2) {
  width: 27%;
}

.item:nth-child(3) {
  width: 26%;
}

.item:nth-child(4) {
  width: 29%;
}

.item:nth-child(5) {
  flex-basis: 27%;
}

.item:nth-child(6) {
  flex-basis: 26%;
}

.item:nth-child(7) {
  flex-basis: 36%;
}

.item:nth-child(8) {
  flex-basis: 36%;
}

.item:nth-child(9) {
  width: 26%;
}

.item:nth-child(10) {
  flex-basis: 29%;
}

.item:nth-child(11) {
  flex-basis: 26%;
}

.item:nth-child(12) {
  flex-basis: 75%;
}

.item:nth-child(13) {
  width: 26%;
}

.item:nth-child(14) {
  flex-basis: 29%;
}

.item:nth-child(15) {
  flex-basis: 26%;
}

<main>
  <div class="row">
    <div class="item">
      <img src="http://via.placeholder.com/875x1200">
      <div class="projectTitle">
        Hello<br><span>Title</span>
      </div>
    </div>
    <div class="item">
      <img src="http://via.placeholder.com/480x655">
      <div class="projectTitle">
        Hello<br><span>Title</span>
      </div>
    </div>
    <div class="item">
      <img src="http://via.placeholder.com/475x650">
      <div class="projectTitle">
        Hello<span>Title</span>
      </div>
    </div>
    <div class="item">
      <img src="http://via.placeholder.com/800x450">
      <div class="projectTitle">
        Hello<span>Title</span>
      </div>
    </div>
    <div class="item">
      <img src="http://via.placeholder.com/875x625">
      <div class="projectTitle">
        Hello<span>Title</span>
      </div>
    </div>
    <div class="item">
      <img src="http://via.placeholder.com/655x480">
      <div class="projectTitle">
        Hello<span>Title</span>
      </div>
    </div>
    <div class="item">
      <img src="http://via.placeholder.com/475x650">
      <div class="projectTitle">
        Hello<span>Title</span>
      </div>
    </div>
    <div class="item">
      <img src="http://via.placeholder.com/800x450">
      <div class="projectTitle">
        Hello<span>Title</span>
      </div>
    </div>
    <div class="item">
      <img src="http://via.placeholder.com/520x250">
      <div class="projectTitle">
        Hello<span>Title</span>
      </div>
    </div>
    <div class="item">
      <img src="http://via.placeholder.com/475x625">
      <div class="projectTitle">
        Hello<span>Title</span>
      </div>
    </div>
    <div class="item">
      <img src="http://via.placeholder.com/480x655">
      <div class="projectTitle">
        Hello<span>Title</span>
      </div>
    </div>
    <div class="item">
      <img src="http://via.placeholder.com/480x655">
      <div class="projectTitle">
        Hello<span>Title</span>
      </div>
    </div>
    <div class="item">
      <img src="http://via.placeholder.com/475x625">
      <div class="projectTitle">
        Hello<span>Title</span>
      </div>
    </div>
    <div class="item">
      <img src="http://via.placeholder.com/480x655">
      <p>Title</p>
    </div>
    <div class="item">
      <img src="http://via.placeholder.com/480x655">
      <p>Title</p>
    </div>
</main>

CODEPEN： https://codepen.io/Dennisade/pen/gzVZjL?editors=1100

如果能在这里得到一些建议会非常好:)

Answer 1

您必须要根据您想要的模式在您的:nth-child() 选择器中添加一个an+b 公式。

这是一个工作的 sn-p 向您展示原理：

body {
  position: relative;
  margin: 0 auto 0 auto;
  width: 100%;
}

.row {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  align-content: flex-end;
}

.item {
  margin: 50px 20px;
  text-align: center;
  position: relative;
}

.item img {
  width: 100%;
}

.projectTitle {
  position: absolute;
  width: 95%;
  top: 100%;
}

/* TAKIT: Here is what I'll do: */
.item:nth-child(6n+1) { width: 25%; }
.item:nth-child(6n+2) { width: 25%; }
.item:nth-child(6n+3) { width: 25%; }
.item:nth-child(6n+4) { width: 80%; }
.item:nth-child(6n+5) { width: 40%; }
.item:nth-child(6n)   { width: 40%; }

<div class="row">
  <div class="item">
    <img src="http://via.placeholder.com/875x1200">
    <div class="projectTitle">
      Hello<br><span>Title</span>
    </div>
  </div>
  <div class="item">
    <img src="http://via.placeholder.com/480x655">
    <div class="projectTitle">
      Hello<br><span>Title</span>
    </div>
  </div>
  <div class="item">
    <img src="http://via.placeholder.com/475x650">
    <div class="projectTitle">
      Hello<span>Title</span>
    </div>
  </div>
  <div class="item">
    <img src="http://via.placeholder.com/800x450">
    <div class="projectTitle">
      Hello<span>Title</span>
    </div>
  </div>
  <div class="item">
    <img src="http://via.placeholder.com/875x625">
    <div class="projectTitle">
      Hello<span>Title</span>
    </div>
  </div>
  <div class="item">
    <img src="http://via.placeholder.com/655x480">
    <div class="projectTitle">
      Hello<span>Title</span>
    </div>
  </div>
  <div class="item">
    <img src="http://via.placeholder.com/475x650">
    <div class="projectTitle">
      Hello<span>Title</span>
    </div>
  </div>
  <div class="item">
    <img src="http://via.placeholder.com/800x450">
    <div class="projectTitle">
      Hello<span>Title</span>
    </div>
  </div>
  <div class="item">
    <img src="http://via.placeholder.com/520x250">
    <div class="projectTitle">
      Hello<span>Title</span>
    </div>
  </div>
  <div class="item">
    <img src="http://via.placeholder.com/475x625">
    <div class="projectTitle">
      Hello<span>Title</span>
    </div>
  </div>
  <div class="item">
    <img src="http://via.placeholder.com/480x655">
    <div class="projectTitle">
      Hello<span>Title</span>
    </div>
  </div>
  <div class="item">
    <img src="http://via.placeholder.com/480x655">
    <div class="projectTitle">
      Hello<span>Title</span>
    </div>
  </div>
  <div class="item">
    <img src="http://via.placeholder.com/475x655">
    <div class="projectTitle">
      Hello<span>Title</span>
    </div>
  </div>
  <div class="item">
    <img src="http://via.placeholder.com/480x655">
    <p>Title</p>
  </div>
  <div class="item">
    <img src="http://via.placeholder.com/480x655">
    <p>Title</p>
  </div>

希望对你有帮助。