我注意到nth-child((选择器有一些奇怪的行为。它似乎也考虑了设置为display: none的元素。有什么办法可以绕过这种行为吗？
我遇到的问题是某些标签是动态添加/删除的。它们都设置为display: none，但我不能每次都更改我的nth-child((选择器。
以下是问题的缩小表示：
<head>
<style>
.container div{
height: 20px;
}
.top, .content{
display:none
}
.mid:nth-child(2){
background-color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="top"></div>
<div class="content"></div>
<div class="mid"></div>
<div class="mid"></div>
<div class="bottom"></div>
</div>
</body>
</html>
在这里，.mid:nth-child(2)不起作用，因为它在技术上是第四个孩子。所以，为了实现这一点，我需要.mid:nth-child(4)。这真的很正常吗？或者我可以绕过它吗？如果它是正常的，为什么它会这样做？
否，这是预期行为
CSS选择器针对DOM树工作，而不是视觉表示。如果您认为display: none规则需要(如果通过样式表应用(一个选择器来针对该元素，则这一点会变得更加明显。如果隐藏后CSS选择器再也看不到该元素，则将不再应用将其设置为隐藏样式的规则，并且该元素将重新出现。