为具有多个属性的嵌套元素创建 CSS 选择器答案

【问题标题】：Create CSS selector for nested element with more than one attribute为具有多个属性的嵌套元素创建 CSS 选择器
【发布时间】：2016-07-28 23:18:12
【问题描述】：

我正在尝试选择一个嵌套在页面 div 中的复选框，用于验收测试。

这是我可能看到的 DOM 结构示例：

...
<div class="section-1">
    ...
    <input type="checkbox" name="type[12312][][]" value="1">Thing1</input>
    <input type="checkbox" name="type[12312][][]" value="2">Thing2</input>
    ...
</div>
...

通常，我可以这样做来选择一个特定的复选框：

input[name*=type][value=1]

但就我而言，我需要特定部分中的复选框，其中页面中有很多。所以我认为以下方法会起作用：

.section-1 input[name*=type][value=1]

但它确实不是。

我的问题是：

为什么不起作用？
我现在如何选择输入？

注意：我可以使用 JS 来获取输入，但我真的更喜欢使用 CSS 选择器，因此我可以使用库 (Selenium) 的函数来处理元素操作。

【问题讨论】：

除了缺少 ' 之外，我在您的 css 选择器中没有发现任何问题。它以这种方式对我有用.section-1 input[name*='type'][value='1']
这也可以.section-1>input[name*='type'][value='1']
您的“总结”实际上是一个答案。请将其移至答案部分。

标签： html selenium-webdriver css-selectors

【解决方案1】：

这行得通：

.section-1 input[name^="type"][value="2"] {
    display: block;
    margin: 25px;
}

<div class="section-1">
    <input type="checkbox" name="type[12312][][]" value="1">
    <input type="checkbox" name="type[12312][][]" value="2">
</div>

尝试在属性值中添加引号。

另外，input 元素是void element。它没有结束标签，也不接受内容。

【讨论】：

你的回答很透彻，所以我会投票给它最佳答案！引号是问题所在，因为我没有意识到在属性值周围添加引号会有所不同。毕竟，它对第一个属性没有影响。感谢您指出输入元素是无效的，这也是我的错误。我相信我抄错了。

【解决方案2】：

如果你想去孩子，你必须使用 >。使用下面的 cssSelector 作为硒元素定位器：

.section-1 > input[name^= 'type'][value= '1']

我使用 ^ 作为你的名字以 type 开头。

希望这会对你有所帮助。

【讨论】：

不幸的是 > 仅适用于直系子女，这不是直系子女。不过我会试试你的建议
报价有效！哇。我认为引号在属性值周围是可选的，但显然这是我的错误。谢谢！
yes > 这是直接的，但你也给了一些属性来检查哪些直接的孩子将被选中。当你使用 value = 1 时，它将选择值为 1 的直接子节点

【解决方案3】：

这是导致此失败的属性值周围缺少引号。根据规范，属性值可以是标识符或字符串。我现在看到标识符可以包含字母和数字，但必须不以数字开头。这就是它失败的原因。

【讨论】：