n-child,div不是直接的孩子

Question

我正在尝试将第二个文本块设置为具有不同的背景颜色,但它们不是直接的子项.如果不使用jQuery,这仍然可行吗？

.wrapper .text-block:nth-child(2) {
  background-color: red;
}

<div class="wrapper">
  <div class="text-block">text-block</div>
  <div class="heading">heading</div>
  <div class="text-block">text-block</div>
</div>

为了让对方更清楚,我希望text-blockdiv在第二个元素上有不同的背景.它们是wrapper上面代码段中显示的div的子代.

Answer 1

我希望text-block div在第二个元素上有不同的背景.它们是上面代码片段中显示的包装div的子代.

实现这一目标的最可靠方法是不使用<div>元素.你的.heading类暗示这<div>是一个标题,所以<div>你可以使用一个<header>元素而不是一个元素:

<div class="wrapper">
  <div class="text-block">text-block</div>
  <header>heading</header>
  <div class="text-block">text-block</div>
</div>

现在,要选择第二个.text-block元素,只需使用:nth-of-type选择器:

.wrapper .text-block:nth-of-type(2) {
  background-color: red;
}

.wrapper .text-block:nth-of-type(2) {
  background-color: red;
}

<div class="wrapper">
  <div class="text-block">text-block</div>
  <header>heading</header>
  <div class="text-block">text-block</div>
</div>

Answer 2

对于这个特定的情况,只是为了定位第二个元素,你可以使用这样的东西:

.wrapper .text-block ~ .text-block {
  background-color: red;
}
.wrapper .text-block ~ .text-block ~ .text-block {
  background-color:transparent;
}

<div class="wrapper">
  <div class="text-block">text-block</div>
  <div class="heading">heading</div>
  <div class="text-block">text-block</div>
  <div class="text-block">text-block</div>
  <div class="text-block">text-block</div>
</div>

这个怎么运作？

1. text-block在第一个元素之后定位并更改所有元素

.wrapper .text-block~.text-block

2. 在第二个之后重置元素的属性 text-block

.wrapper .text-block~.text-block~.text-block

这个解决方案的问题在于,您只是不按照它的工作方式单独定位第二个元素,您需要重置或更改第二个元素之后的元素的属性.