顺序很重要 顺序很重要 顺序很重要

+选择器

  • .a + .b + .c {}

    选中 严格顺序为 ab紧接着的兄弟c元素

  • .a + .b + * {}

    选中 严格顺序为 ab紧接着的下一个任意兄弟元素

<div class="a"> 1 </div>
<div class="b"> 2 </div>
<div class="a"> 3 </div>
<div class="b"> 4 </div>
<div class="b"> 5 </div>
<div class="a"> 6 </div>

.a + .b + .a {}    选中3
.a + .b + * {}     选中3、5

~选择器

  • .a + .b + .c {}

    选中 严格顺序为ab以下所有兄弟c元素

  • .a ~ .b ~ * {}

    选中 严格顺序为ab以下的所有兄弟元素