如何在指定DOM结构中选择.separator元素之后的.first与.second类元素？

首先，你原本的选择器.wrapper .separator + .inner-wrapper .first在语法上是正确的——它确实会选中.wrapper下紧跟在.separator之后的.inner-wrapper里的.first元素。如果没生效，大概率是优先级冲突或者DOM结构和你预期有出入，下面给你一步步排查和解决的方案：

一、排查选择器未生效的常见原因 #

1. 优先级被其他样式覆盖
   如果你之前写过更通用的选择器（比如.wrapper .inner-wrapper .first），它的优先级和你现在的选择器相同，若那个样式写在后面，就会覆盖你的新样式。可以通过增加选择器特异性来解决：

   /* 用直接子代选择器 > 提升权重 */
   .wrapper > .separator + .inner-wrapper > .first {
     /* 你的样式 */
   }
   

   应急情况下也可以在属性后加!important（尽量少用，避免样式维护混乱）：

   .wrapper .separator + .inner-wrapper .first {
     color: red !important;
   }
   

2. DOM元素并非直接相邻
   你提供的示例DOM里.separator和后面的.inner-wrapper是直接相邻的，但外部资源的实际DOM可能插入了隐藏元素、注释等你没注意到的节点。这种情况下，相邻兄弟选择器+会失效，换成**通用兄弟选择器~**即可——它会选中.separator之后所有同级的.inner-wrapper：

   /* 选中.separator之后所有.inner-wrapper里的.first */
   .wrapper .separator ~ .inner-wrapper .first {
     /* 你的样式 */
   }
   /* 对应的.second元素 */
   .wrapper .separator ~ .inner-wrapper .first .second {
     /* 你的样式 */
   }
   

3. header区域的相同结构干扰
   你提到header容器里也有相同DOM结构，若不想选中header内的元素，需要给选择器增加范围限制：

   • 如果目标元素在main标签内：

     main .wrapper .separator + .inner-wrapper .first {
       /* 你的样式 */
     }
     

   • 如果header里的.wrapper有专属类（比如header-wrapper），可以用:not排除：

     .wrapper:not(.header-wrapper) .separator + .inner-wrapper .first {
       /* 你的样式 */
     }
     

二、快速验证选择器的小技巧 #

打开浏览器开发者工具（F12），在「元素」面板的搜索框输入你的选择器，看看是否能精准选中目标元素：

• 如果能选中但样式没生效，查看「样式」面板里的属性是否被划掉，大概率是优先级冲突；
• 如果选不中，说明外部资源的实际DOM和你预期的不一致，需要重新检查结构。

内容的提问来源于stack exchange，提问作者yayecic831