Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

我希望text-block 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>

{{1}}

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>

如何运作？

在第一个

text-block

.wrapper .text-block~.text-block

在第二个text-block

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

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

Answer 3

如果您的代码结构与您发布的代码完全相同，我认为只需使用

.wrapper .text-block:not(:nth-child(1))

＆＃13;

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

＆＃13;

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

＆＃13;

ns-child，其中div不是直接孩子

3 个答案: