如何根据 CSS 的任意数字倍数 select 在特定 class 之后的第 n 个兄弟？

Question

我试过这样创建一个页面：

当然这只是我项目的一个总结。我想在每个 div 之后显示 class="s1"

(first & 4n+1'th) div with class="s2" in 'white' background
(first & 4n+2'th) div with class="s2" in 'black' background
(first & 4n+3'th) div with class="s2" in 'black' background
(first & 4n+4'th) div with class="s2" in 'white' background

-----------------------------------------------------------
              every div with class="s1"
-----------------------------------------------------------
4n+1'th div with class="s2" |  4n+2'th div with class="s2"
     (White background)     |      (Black background)
-----------------------------------------------------------
4n+3'th div with class="s2" |  4n+4'th div with class="s2"
     (Black background)     |      (White background)
-----------------------------------------------------------

并为每个 div 和 class="s1" 重复此循环。我插入我的简单代码 too.as 你在我的片段中看到一些 div 和 class="s2"
有错误的浮动面，其中一些在一行中具有相同的颜色或
第一个 div 在 div 之后 class="s1" 以黑色背景开始。

body {
  background: gray;
  color: blue;
  position: relative;
}
* {
  text-align: center;
  vertical-align: middle;
  margin: auto;
}
div {
  height: 50px;
  display: table;
  margin: auto;
  margin-bottom: 10px;
}
.s1 {
  width: 100%;
  clear: both;
  background: lightgreen;
}
.s2 {
  width: 50%;
}
a,
h2 {
  display: table-cell;
  height: 100%;
}
/*----------------------------------------------------*/

/*-------mistakes in float&color under second S1------*/

/*-------mistakes in float&color under third  S1------*/

/*----------------------------------------------------*/

.s2:nth-child(odd) {
  float: right;
}
.s2:nth-child(even) {
  float: left;
}
.s2:nth-of-type(4n+4) {
  background: black;
}
.s2:nth-of-type(4n+3) {
  background: black;
}
.s2:nth-of-type(4n+2) {
  background: white;
}
.s2:nth-of-type(4n+1) {
  background: white;
}
/*----------------------------------------------------*/

<div class="s1">
  <h2>first S1</h2></div>
<div class="s2"><a>S2-1a</a></div>
<div class="s2"><a>S2-2a</a></div>
<div class="s2"><a>S2-3a</a></div>
<div class="s2"><a>S2-4a</a></div>
<div class="s2"><a>S2-5a</a></div>
<div class="s2"><a>S2-6a</a></div>
<div class="s2"><a>S2-7a</a></div>
<div class="s2"><a>S2-8a</a></div>
<div class="s1"><h2>second S1</h2>
</div>
<div class="s2"><a>S2-1b</a>
</div>
<div class="s2"><a>S2-2b</a>
</div>
<div class="s2"><a>S2-3b</a>
</div>
<div class="s2"><a>S2-4b</a>
</div>
<div class="s2"><a>S2-5b</a>
</div>
<div class="s1">
  <h2>third S1</h2>
</div>
<div class="s2"><a>S2-1c</a>
</div>
<div class="s2"><a>S2-2c</a>
</div>
<div class="s2"><a>S2-3c</a>
</div>
<div class="s2"><a>S2-4c</a>
</div>

Answer 1

如果我理解你的问题..

使用 element + 选择器。 http://www.w3schools.com/cssref/sel_element_pluss.asp

.s1 + div + div + div { //Selects the third div after ".s1"
    background-color:red;
}

Answer 2

nth-of-class 不存在，nth-of-type 将针对它们全部，因此，您需要将 .s2 包裹在 div 中。然后，您可以删除类并使用 .s1+div>div

定位它们

body {
    background: gray;
    color: blue;
    position: relative;
}
* {
    text-align: center;
    vertical-align: middle;
    margin: auto;
}
div {
    height: 50px;
    display: table;
    margin: auto;
    margin-bottom: 10px;
}
.s1+div {
    display: block;
}
.s1 {
    width: 100%;
    clear: both;
    background: lightgreen;
}
.s1+div>div {
    width: 50%;
}
a, h2 {
    display: table-cell;
    height: 100%;
}
/*----------------------------------------------------*/

/*-------mistakes in float&color under second S1------*/

/*-------mistakes in float&color under third  S1------*/

/*----------------------------------------------------*/
.s1+div>div:nth-child(odd) {
    float: left;
}
.s1+div>div:nth-child(even) {
    float: right;
}
.s1+div>div:nth-of-type(4n+1),
.s1+div>div:nth-of-type(4n+4) {
    background: white;
}

.s1+div>div:nth-of-type(4n+2),
.s1+div>div:nth-of-type(4n+3) {
    background: black;
}
/*----------------------------------------------------*/

<div class="s1">
    <h2>first S1</h2>
</div>
<div>
    <div><a>S2-1a</a></div>
    <div><a>S2-2a</a></div>
    <div><a>S2-3a</a></div>
    <div><a>S2-4a</a></div>
    <div><a>S2-5a</a></div>
    <div><a>S2-6a</a></div>
    <div><a>S2-7a</a></div>
    <div><a>S2-8a</a></div>
</div>
<div class="s1">
    <h2>second S1</h2>
</div>
<div>
    <div><a>S2-1b</a></div>
    <div><a>S2-2b</a></div>
    <div><a>S2-3b</a></div>
    <div><a>S2-4b</a></div>
    <div><a>S2-5b</a></div>
</div>
<div class="s1">
    <h2>third S1</h2>
</div>
<div>
    <div><a>S2-1c</a></div>
    <div><a>S2-2c</a></div>
    <div><a>S2-3c</a></div>
    <div><a>S2-4c</a></div>
</div>

如何根据 CSS 的任意数字倍数 select 在特定 class 之后的第 n 个兄弟？

How to select nth sibling after specific class based on any number multiple with CSS?

html

css

css-selectors

siblings