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

Question

我正在尝试选择嵌套在页面 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]

但它不是。

我的问题是:

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

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

Answer 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 .它没有结束标签，也不接受内容。