我正在寻找一个像第n个子选择器一样的选择器，但是不会在每个新div重置。这就是我的意思：
#yellow p:nth-child(3n) {
background-color: yellow;
}<!DOCTYPE html>
<html>
<body>
<div id="yellow">
<div>
<p>This should not be yellow.</p>
<p>This should not be yellow.</p>
</div>
<br>
<div>
<p>This should be yellow.</p>
<p>This should not be yellow.</p>
</div>
</div>
</body>
</html>
如果你运行前面的代码段，那么p标签都不会变黄，因为第n个子选择器中的3n计数器会重新启动＆＃39;在第二个div标签。我正在寻找一个忽略它的选择器，并简单地将css应用于#yellow div中的每个第3个p元素（无论其他任何封装标记）。
这样的选择器是否存在，如果不存在，我可以使用哪些其他选择（jquery / js）？ 谢谢！
答案 0 :(得分：3)
:nth-child()和:nth-of-type()对兄弟姐妹进行操作，因此定位页面上的所有p一起工作都不会起作用，因为他们不是兄弟姐妹。
要定位该段落，我会定位您想要的div并在:nth-child()内使用div来选择相对于其兄弟姐妹的p。
#yellow div:last-child p:first-child {
background-color: yellow;
} <div id="yellow">
<div>
<p>This should not be yellow.</p>
<p>This should not be yellow.</p>
</div>
<br>
<div>
<p>This should be yellow.</p>
<p>This should not be yellow.</p>
</div>
</div>
要在JS / jquery中执行此操作，您可以获得p的所有#yellow个孩子并定位到第3个孩子。
$('#yellow p').eq(2).css('background','yellow');<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="yellow">
<div>
<p>This should not be yellow.</p>
<p>This should not be yellow.</p>
</div>
<br>
<div>
<p>This should be yellow.</p>
<p>This should not be yellow.</p>
</div>
</div>
答案 1 :(得分：2)
#yellow div:nth-of-type(2) p:first-of-type {
background-color: yellow;
}
<div id="yellow">
<div>
<p>This should not be yellow.</p>
<p>This should not be yellow.</p>
</div>
<br>
<div>
<p>This should be yellow.</p>
<p>This should not be yellow.</p>
</div>
</div>
<div id="yellow">
<div>
<p>This should not be yellow.</p>
<p>This should not be yellow.</p>
</div>
<br>
<div>
<p>This should not be yellow.</p>
<p>This should not be yellow.</p>
</div>
</div>
答案 2 :(得分：1)
最简单的方法是使用JavaScript / jQuery，因为CSS第n选择器组仅限于将其关系作为兄弟姐妹。 演示2 有一个简单的JavaScript解决方案，详细信息在其中进行了评论。
<小时/>
尝试：
div:nth-of-type(2) p:first-of-type
这意味着：选择第一个包含第二个div作为其祖先的段落。
div:nth-of-type(2) p:first-of-type {
background-color: yellow;
}<!DOCTYPE html>
<html>
<body>
<div id="yellow">
<div>
<p>This should not be yellow.</p>
<p>This should not be yellow.</p>
</div>
<br>
<div>
<p>This should be yellow.</p>
<p>This should not be yellow.</p>
</div>
</div>
</body>
</html>
/* querySelectorAll() collects all <p> into a NodeList
|| Array.from() converts that NodeList into an array
*/
const paraList = Array.from(document.querySelectorAll('p'));
// forEach() runs a function on each <p>...
paraList.forEach(function(para, idx) {
/* Check each <p> on every iteration for their indexed
|| position number within the array. Calculate the
|| index by dividing it by 3 and if the modulus
|| (i.e. remaining number) is 0 then set that <p>
|| background-color to yellow.
*/
if ((idx + 1) % 3 === 0) {
para.style.backgroundColor = 'yellow';
}
});<!DOCTYPE html>
<html>
<body>
<div id="yellow">
<div>
<p>This should not be yellow.</p>
<p>This should not be yellow.</p>
</div>
<br>
<div>
<p>This should be yellow.</p>
<p>This should not be yellow.</p>
</div>
<div>
<p>This should not be yellow.</p>
<p>This should be yellow.</p>
</div>
<div>
<p>This should not be yellow.</p>
<p>This should not be yellow.</p>
</div>
<div>
<p>This should be yellow.</p>
<p>This should not be yellow.</p>
</div>
<div>
<p>This should not be yellow.</p>
<p>This should be yellow.</p>
</div>
<div>
<p>This should not be yellow.</p>
<p>This should not be yellow.</p>
</div>
<div>
<p>This should be yellow.</p>
<p>This should not be yellow.</p>
</div>
<div>
<p>This should not be yellow.</p>
<p>This should be yellow.</p>
</div>
</div>
</body>
</html>