为什么我的 CSS 选择器 `h3:nth-child(1):contains(\'a\')` 不工作？

CSS 选择器故障排除：h3:nth-child(1):contains('a') 不工作

本文解决了该问题CSS 选择器 h3:nth-child(1):contains('a') 没有返回任何结果，尽管它是预期的

即使组件选择器 h3:nth-child(1) 检索到目标元素，在使用 :contains() 函数时也会出现问题。 :contains() 选择器原本是一个 CSS3 选择器，但最终没有包含在最终规范中。

非功能性原因

由于架构:contains() 与通用选择器结合使用或用于特定样式属性会带来性能挑战。选择器往往不仅会返回匹配的元素，还会返回其祖先元素，从而导致意外的选择。

替代方法

因为没有与 :contains( 等效的 CSS 选择器），需要替代方法：

• HTML修改： 更新 HTML 结构以分隔要选择的元素。
• jQuery 的 :contains(): 利用 jQuery 的 :contains() 函数来实现其支持的用法。

jQuery 和Selenium RC 用户

• jQuery 的 :contains() 函数是基于早期 CSS3 规范实现的。
• 使用时请谨慎操作，避免出现不可预见的结果。

替代语法h3:nth-child(1)

最后一点，选择器 h3:nth-child(1) 可以使用 CSS2 标准表示为 h3:first-child ，从而提高浏览器兼容性。

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