文章/答案/技术大牛

发布

社区首页 >问答首页 >容器内的目标2、3、6、7、10等

问容器内的目标2、3、6、7、10等
EN

Stack Overflow用户

提问于 2018-04-18 16:49:04

回答 4查看 153关注 0票数 0

我不能破解这个。如何击中这样的项目: 2，3，6，7，10等等.有jQuery或css的把戏吗？我就是搞不懂

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  /* beautifying */
  background: pink;
  padding: 20px; 
  max-width: 200px;
  margin: auto;
}


.item {
  content: "";
  width: 48%;
  text-align: center;
  height: 60px;
  background: green;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
  <div class="item">13</div>
  <div class="item">14</div>
</div>

jquery

css

回答 4

Stack Overflow用户

回答已采纳

发布于 2018-04-18 17:00:17

您可以使用两个选择器来完成此任务：.container > div:nth-child(4n+2)和.container > div:nth-child(4n+3)

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  /* beautifying */
  background: pink;
  padding: 20px;
  max-width: 200px;
  margin: auto;
}

.item {
  content: "";
  width: 48%;
  text-align: center;
  height: 60px;
  background: green;
}

.container>div:nth-child(4n+2),
.container>div:nth-child(4n+3) {
  background: red;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
  <div class="item">13</div>
  <div class="item">14</div>
</div>

票数 5

Stack Overflow用户

发布于 2018-04-18 17:08:21

你可能在找nth-of-type(n)伪类选择器-

如在.item:nth-of-type(3)

在你的例子中，托儿所提到的模式应该有效。

请参阅下面代码片段中的CSS示例。

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  /* beautifying */
  background: pink;
  padding: 20px;
  max-width: 200px;
  margin: auto;
}

.item {
  content: "";
  width: 48%;
  text-align: center;
  height: 60px;
}


/* Selects a patterned .item element */
.item:nth-of-type(4n+2),
.item:nth-of-type(4n+3){
  background-color: lime;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
  <div class="item">13</div>
  <div class="item">14</div>
</div>

票数 1

Stack Overflow用户

发布于 2018-04-18 16:59:12

我想你想要这种类型的系列

2 3 
6 7
10 11
14 15
18 19
4n + 2 = 2 6 10
4n + 3 = 3 7  11

在css中，您可以编写nth-child(4n+2)和nth-child(4n+3)。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/49905012

复制

相似问题

问容器内的目标2、3、6、7、10等
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问容器内的目标2、3、6、7、10等EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问容器内的目标2、3、6、7、10等
EN