nth孩子divs不直接儿童

我想设置第二个文本块有不同的背景颜色，但他们不是直接的孩子。这仍然可以不使用jQuery？nth孩子divs不直接儿童

.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-block的div有第二个元素在不同的背景。他们是wrapper div的孩子，显示在上面的代码片段中。

来源

2016-11-16 SamXronn

你所说的“没有直接的孩子”的意思是？ –

他们是否可以预测另一种元素的类型？他们是包装师或者某种元素下的一个div的子女吗？ –

'.wrapper.text-block'会打到'class =“包装文本块” –

我希望文本块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>

来源

2016-11-16 16:56:08

页面的结构不固定，因此可以将附加div与其他内容元素一起添加到类包装器中，例如，画廊块。我期待着在“wrapper”div里面的所有div都用类名“text-block”来计数，而在第二个div上的任何位置都是例如。第四个div改变背景颜色 – SamXronn

@SamXronn然后不，没有一个方法可以做到这一点，而不需要引入一些JavaScript或者修改生成HTML的任何东西来为第二个'.text-block'元素添加一个独特的属性。 CSS没有'.nth -...'版本，它可以满足每个孩子或特定类型以外的任何东西。 –

@SamXronn你的情况可能有其他解决方法。是否'.text-block'总是在'.heading'之后找到，与第一个不同？如果是这样，你可以使用'.heading + .text-block'。会不会只有两个'.text-block'元素？如果是这样，你可以使用'.text-block〜.text-block'在第一个'.text-block'之后选择任何'.text-block'。 –

对于这个特定的情况下，只是目标，你可以使用类似这样的第二个元素：

.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块〜的.text块后

重设第二个元素后的属性text-block

.wrapper的.text块〜的.text块〜的.text块

这种解决方案的问题是，你只是不针对单独第二元素它的工作原理，你会的方式需要重置或更改第二个元素后面的元素的属性。

来源

2016-11-16 17:02:31 DaniP

虽然这是一个解决方案，但值得提醒一点，这是值得的。这种方法意味着对OP的第二个'.text-block'所做的每一项变更，特别是该元素的内容都必须重置。 –

您能否扩展内容被重置的警告？ – SamXronn

@JamesDonnelly yep我已经在答案上省略了它，但将其作为注释添加以使其保持清晰 – DaniP

-1

如果你的代码结构完全一样，你贴我认为它的代码只是使用

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

.wrapper .text-block:not(:nth-child(1)) { 
 
    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>

来源

2016-11-16 17:05:38

nth孩子divs不直接儿童

回答

相关问题