pa11y Actions中Login按钮的有效CSS选择器适配求助

针对你的Login按钮，以下是几个符合Document.querySelector规范、能被pa11y识别的可靠选择器：

1. 基于name属性选择（推荐） #

按钮的name属性为唯一值login，直接用：

input[name="login"]

若需提高选择精度，可结合父元素：

#topButtonRow input[name="login"]

2. 基于value属性选择 #

匹配按钮的value值（注意包含首尾空格）：

input[value=" Login "]

若要忽略空格匹配包含"Login"的value，可使用：

input[value~="Login"]

3. 基于title属性选择 #

利用按钮的title属性定位：

input[title="Login"]

4. 结合类名与属性 #

通过类名+属性的组合缩小范围：

.btn[name="login"]

或结合父元素：

#topButtonRow .btn[name="login"]

原选择器失效原因 #

#topButtonRow > input:nth-child(4)失效的常见情况：

• 父元素#topButtonRow内存在隐藏元素、注释或文本节点（如换行空格），nth-child会计算所有子节点，导致计数偏差
• 页面动态渲染后，按钮的DOM顺序发生了改变

验证方式 #

在浏览器控制台执行document.querySelector('你的选择器')，能选中目标元素的话，pa11y也可正常识别。

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