javascript - 如何使用css选择器获取子元素？

Question

我使用 Nightwatch.js 来测试网站。现在我有这个 html 代码:

<div class="form-group">
    <div class="col-sm-6">
        <input id="inputTireManufacturer">
        </input>
    </div>
</div>

我需要选择input节点。但还有其他带有 id="inputTireManufacturer" 的节点。这意味着我需要一个选择器，可以选择带有 class="form-group" 的元素，该元素包含带有 class="col-sm-6" 的元素，其中包含带有 id="inputTireManufacturer" 的元素。像这样的东西:.form-group:.col-sm-6:#inputTireManufacturer但这是行不通的。我该怎么做？

Answer 1

其中有语法错误:

.form-group:.col-sm-6:#inputTireManufacturer

修复它们(删除冒号):

.form-group.col-sm-6#inputTireManufacturer

这个means

Selects any element with a class attribute that contains the word form-group, a class attribute that contains the word col-sm-6, and an id attribute that equals inputTireManufacturer.

您需要descendant combinators :

.form-group .col-sm-6 #inputTireManufacturer

Selects any element with an id attribute that equals inputTireManufacturer that is a descendant of any element with a class attribute that contains the word col-sm-6 that is a descendant of any element with a class attribute that contains the word form-group.

<小时/>

However :

The id attribute specifies its element's unique identifier (ID). [DOM]

The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.

如果你想将一个元素标记为一组相似元素的一部分，那么使用一个类，这就是类的用途。

<div class="form-group">
    <div class="col-sm-6">
        <input class="inputTireManufacturer">
        </input>
    </div>
</div>

.form-group .col-sm-6 #inputTireManufacturer

Selects any element with a class attribute that contains the word inputTireManufacturer that is a descendant of any element with a class attribute that contains the word col-sm-6 that is a descendant of any element with a class attribute that contains the word form-group.