Question

我在整个容器中有一系列div：

<div class="positionDivs">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <!--this goes on for a unspecified number of times-->
</div>

在主div（positionDivs）

中显示为三列

我需要做的就是在这个容器中设置每隔三个div的样式：

.positionDivs div:nth-child(3n){
    background-color:black;
}

但我也（这是我能解决的部分！）需要设置中心列的样式。在上面的例子中，这将是数字2,5和8.

有人可以帮忙吗？

Answer 1

只需从你选择的前一个div中减去一个：

.positionDivs div:nth-child(3n-1){
    background-color:red;
}

<强> jsFiddle example

Answer 2

使用private Dictionary<string, int> Splitter(string[] file, bool distinct) { var query = file .SelectMany(i => File.ReadLines(i) .SelectMany(line => line.Split(new[] {' '}, StringSplitOptions.RemoveEmptyEntries)) .AsParallel() .Select(word => word.ToLower()) .Where(word => !StopWords.Contains(word)) .Where(word => !StopWordsPl.Contains(word)) .Where(word => !PopulatNetworkWords.Contains(word)) .Where(word => !word.All(char.IsDigit))); if (distinct) { query = query.Distinct(); } query.GroupBy(word => word) .ToDictionary(g => g.Key, g => g.Count()); return query; }

3n+2

或.positionDivs div:nth-child(3n+2){ /* CSS Properties */ }

3n-1

Answer 3

在3n+2中使用nth-child。

.positionDivs div:nth-child(3n+2){
    background-color:red;
}

OR 3n-1，都返回相同的结果。

.positionDivs div:nth-child(3n-1){
    background-color:red;
}

如何在div中仅设置某些列的样式？

3 个答案: