为什么 `h3:nth-child(1):contains(\'a\')` 没有按预期工作？

选择器 h3:nth-child(1):contains('a') 无效

尽管有明显的语法，选择器 h3: nth-child(1):contains('a') 未能执行其预期

底层

经过进一步调查，发现 h3:nth-child(1) 正确地定位了其父容器中的第一个 h3 元素。但是， h3:nth-child(1):contains('a') 不会产生任何结果，因为 :contains() 选择器（最初是作为 CSS3 功能）已从 CSS 规范中省略。

： contains() 旨在匹配包含特定文本模式的元素。不幸的是，它的工作方式对浏览器性能提出了挑战，并导致过度选择问题。例如，使用 :contains() 匹配元素也会匹配其所有祖先，与通用选择器或某些样式属性结合使用时可能会导致意外行为。

替代方法

由于缺乏合适的 CSS 选择器替代方案，要实现所需的结果需要替代方法。可以探索修改 HTML 结构或利用 jQuery 的 :contains() 实现：

• 选择 h3 元素作为其父级中的第一个子元素，并且文本包含“a”。

jQuery 或 Selenium RC 注意事项

对于 jQuery对于 Selenium RC 用户，:contains() 在 Sizzle 选择器引擎中实现，提供与 CSS3 规范类似的功能。不过，建议谨慎使用此选择器，以避免意外选择。

细化

最后，h3:nth-child(1) 可以替换为 h3 :first-child 作为 CSS2 选择器增强浏览器兼容性。

以上是为什么 `h3:nth-child(1):contains(\'a\')` 没有按预期工作？的详细内容。更多信息请关注PHP中文网其他相关文章！