CSS子选择器模式

时间：2018-06-28 08:40:00

标签： html css sass css-selectors

我已经建立了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

非常高兴在这里获得一些建议:)

1 个答案:

答案 0 :(得分：1)

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

以下是一个有效的代码段，向您展示了原理：

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>

希望有帮助。

相关问题
最新问题