如何用CSS选择器获取子元素？

我使用Nightwatch.js来测试一个网站。现在我有这个html代码：如何用CSS选择器获取子元素？

<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 但这不起作用。我该怎么做？

来源

2015-07-03 Garrarufa

但还有其他节点id =“inputTireManufacturer”。 - 然后你不使用HTML。文档中的ID **必须是唯一的**。改为使用班级。 – Quentin

我用opera查看网站的html代码，id =“inputTireManufacturer”在不同的节点出现好几次。 – Garrarufa

这仍然是不允许的。然而，它的工作原理是 – Quentin

这具有在它的语法错误：

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

固定它们（除去冒号）：

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

这means

选择与含有类属性的任何元件单词form-group，包含单词col-sm-6的类属性，以及等于inputTireManu的id属性facturer。

您需要descendant combinators：

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

选择带有等于inputTireManufacturer一个id属性，它是包含单词COL-SM-6类属性的元素的后代的任何元素是具有包含单词form-group的类属性的任何元素的后代。

However：

id属性指定其元素的独特标识符（ID）。 [DOM]

该值必须是唯一，该元素的主子树中的所有ID必须包含至少一个字符。该值不能包含任何空格字符。

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

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

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

选择与包含单词的一类属性的任何元件inputTireManufacturer是与包含单词COL-SM-6，其是任何元件与后代的一类属性的任何元件的后代包含单词form-group的class属性。

来源

2015-07-03 10:24:13 Quentin

如何用CSS选择器获取子元素？

回答

相关问题