CSS使用:nth-child无法选中带特定style属性div问题求助

• :nth-child的匹配逻辑不符合预期
  :nth-child(N)的执行逻辑是先定位父元素下的第N个div子元素，再校验该元素是否满足[style="text-align: left;"]的过滤条件，而非先筛选出所有符合样式条件的div再取第一个。你提供的代码结构里，父容器的第1个div子元素是text-align: center属性，完全不满足样式过滤条件，因此选择器无法匹配到任何元素。
• style完全匹配规则容错率极低
  [style="text-align: left;"]属于属性完全匹配，只要实际渲染的元素style属性中存在多余空格、换行、其他额外样式，就会匹配失败。比如元素实际style为text-align: left; （末尾带空格）、text-align:left; line-height:1.5都会导致匹配失效。

高兼容性方案（兼容所有现代浏览器） #

用相邻兄弟选择器做规则覆盖，先给所有符合条件的div加样式，再把第一个之后的同条件div样式还原即可：

/* 匹配所有带text-align:left样式的div */
.et_pb_post_content div[style*="text-align: left"] {
    clear: both;
}
/* 排除第一个之后的所有同条件div，还原默认样式 */
.et_pb_post_content div[style*="text-align: left"] ~ div[style*="text-align: left"] {
    clear: none;
}

这里用[style*="text-align: left"]包含匹配规则，只要style属性中存在对应样式片段即可匹配，容错率更高。

新特性简化方案（2023年后主流浏览器支持） #

如果不需要兼容老旧浏览器，可以用CSS :nth-child的of过滤语法直接匹配：

.et_pb_post_content div:nth-child(1 of [style*="text-align: left"]) {
    clear: both;
}

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