Question

我一直在尝试使用Subsequent-sibling combinator＆＃34;〜＆＃34;设置不同的样式到同一个类（当它在标记中第二次出现时）。但它似乎没有用，也许我在使用＆＃34;〜＆＃34;省略细节。，也...不幸的是我无法更改html，因为它是由cms生成的

<div class="root">
  <div class="container">
    <div class="mosaic big">
      <div>Red</div>
    </div>
  </div>
  <div class="container">
    <div class="mosaic medium">
      <div>3</div>
    </div>
  </div>
  <div class="container">
    <div class="mosaic big">
      <div>Blue</div>
    </div>
  </div>
  <div class="container">
    <div class="mosaic medium">
      <div>4</div>
    </div>
  </div>
</div>

这是css .root＆gt; .container＆gt; .mosaic.big { 红色 }

.root > .container > .mosaic.big ~ .root > .container > .mosaic.big {
  color: blue
}

也......这里是一个小伙伴https://jsfiddle.net/chinoche/wd1rhg11/ 提前致谢

Answer 1

尝试这种造型。

.root > .container > .mosaic.big {
  color: red
}

.root > .container:nth-child(3) > .mosaic.big {
  color: blue
}

OR

.root > .container > .mosaic.big {
  color: red
}

.root > .container:nth-child(n+2) > .mosaic.big {
  color: blue
}

Answer 2

根据他们的回答建议，我认为这是你想要的（你可以评论，如果它不适合边缘情况）：

正如我所说，~仅适用于具有相同父级的元素。

注意：它不会使它变为蓝色，因为它是容器中的第二个.mosaic.big，但因为容器本身不是第一个。要拥有一个没有实验性功能的完全可行的解决方案，您应该需要JS

CSS：

.root > .container > .mosaic.big {
  color: red
}

.root > .container ~ .container > .mosaic.big {
  color: blue
}

https://jsfiddle.net/wd1rhg11/5/

Answer 3

遗憾的是，如果不更改html，您将无法使用后续的兄弟选择器

CSS下一个兄弟选择器只会匹配操作符左侧的类的直接兄弟。因此，要使用此运算符，您使用此元素的元素必须具有相同的父元素。

此外，右侧的匹配将从左侧匹配的元素开始，因此您不需要添加父结构

.root > .container > .mosaic.big {
  color: red
}

.root > .container > .mosaic.big ~ .mosaic.big {
  color: blue
}

见更新

https://jsfiddle.net/wd1rhg11/4/

如果可能的话，你可以用javascript实现你想要的东西

Answer 4

你可以使用'.mosaic'类的nth-child（n）：

.root > .container > .mosaic:nth-child(1).big {
  color: red;
}
.root > .container > .mosaic:nth-child(3).big {
  color: blue;
}

这里是jsfiddle https://jsfiddle.net/andrewsilent/w8jjjsbz/

css - 为类适用的其他节点设置不同的样式

4 个答案: