Question

我有以下代码：

$(document).ready(function(){
  $('#button').click(function(){
    $('.row').append('<div class="col-4"><div class="text-container"><h1 class="heading">Something</h1></div></div>');
  });
});

.text-container:nth-of-type(odd){
   background-color: green;
   color: yellow;
}
.text-container:nth-of-type(even){
  background-color: yellow;
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">Click</button>
<div class="container">
  <div class="row"></div>
</div>

我想做什么：

单击按钮时，我需要将text-container和background-color: green一起获得background-color: yellow和col-4来获得容器。

问题是：每个容器都被视为一个奇数，如果我将另一个类添加到org.springframework.jdbc.datasource.lookup.AbstractRoutingDataSource容器中并为该类设置背景色，则它将删除列中的所有填充，它们将彼此非常接近。

Answer 1

您误解了:nth-of-type()的工作原理。

您添加的每个.text-container是odd。

:nth-of-type()计数是指在任何给定上下文中的第n个类型，在您的情况下为<div class="col-4">。在其中，您的每个<div class="text-container">是:first-of-type。

这可能是您需要的（我更改的只是CSS选择器）：

$(document).ready(function() {
  $('#button').click(function() {
    $('.row').append('<div class="col-4"><div class="text-container"><h1 class="heading">Something</h1></div></div>');
  });
});

.row>div:nth-of-type(odd) .text-container {
  background-color: green;
  color: yellow;
}

.row>div:nth-of-type(even) .text-container {
  background-color: yellow;
  color: green;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">Click to add a div</button>
<div class="container">
  <div class="row"></div>
</div>

Answer 2

由于您的文本容器位于自己的div中，因此它们始终是第一个类型。尝试为您的JS尝试：

$(document).ready(function(){
  $('#button').click(function(){
    $('.row').append('<div class="col-4 text-container"><h1 class="heading">Something</h1></div>');
  });
});

那么您所有的文本容器都是兄弟姐妹，并且可以正常工作！

为什么我的第n个选择器不起作用？

2 个答案: