在这样结构的 HTML 中获取我想要的特定元素的正确选择器字符串是什么？

Question

<body><form>

<fieldset>
 <legend>Current Node Information</legend>
    <label>Node Name: <input type="text" id="nodeNameField"></label><br>
    <label>Node Type: <input type="text" id="nodeTypeField"></label><br>
    <label>Node Value: <input type="text" id="nodeValueField"></label><br>
    <label>Child Element Count: <input type="text" id="childElementCountField"></label>
</fieldset>

<fieldset id="navFieldset">
 <legend>Movement Controls</legend>
 <input type="button" value="Parent" data-prop="parentNode" id="parentBtn">
 <input type="button" value="First Child" data-prop="firstChild" id="firstChildBtn">
 <input type="button" value="Reset to Root" data-prop="root" id="rootBtn">
</fieldset>
</form></body>

它与 select 或（querySelectorAll 函数中的字符串参数）

配合使用效果很好

window.onload = function () {
    nodeMove.currentElement = document.documentElement;

    var elements = document.querySelectorAll("fieldset#navFieldset input");  
    for (var i = 0, len = elements.length; i < len; i++)  {
        elements[i].onclick = function () { nodeMove(this) };
    }
    update(nodeMove.currentElement);
}

下面是我迄今为止尝试过的 select 的列表。

#navFieldset input    // this works fine
legend > input        // ERROR
#navFieldset > input  // this works fine
fieldset > input      // this works fine
fieldset#navFieldset  // ERROR

我需要 select 字段集中的所有按钮。我想知道在显示为 this woks fine 的情况下，那些特定的 select 是否有任何区别。此外，为什么显示为 ERROR 的情况是错误的。我想知道原因。我正在阅读此 resource.

中的 CSS 选择器

Answer 1

工作select或

是的，那些 select 都是不同的，但是 select 是正确的。 redundancy/flexibility 对于 CSS select 或出现略有不同的标记时是必需的。

Non-working select或

legend > input 不起作用，因为 legend 不是 input 的 parent。那些是兄弟姐妹。您可以使用 legend ~ input.

fieldset#navFieldsetselect是fieldset，不过你似乎对inputchildren感兴趣。您可以像使用后代 select 或 </code> 一样使用 child select 或 <code>>: fieldset#navFieldset > input (space): fieldset#navFieldset input.

在这样结构的 HTML 中获取我想要的特定元素的正确选择器字符串是什么？

What is the correct selector string to get the particular elements I want in HTML structured like this?

html

javascript

css-selectors

工作select或

Non-working select或