Question

我真的很难理解如何选择第n类选择的孩子。

我希望选择.formdiv：nth-of-type（1）的标签比使用.formdiv选择的所有其他div中的标签短

这最容易通过以下jsfiddle进行解释：http://jsfiddle.net/LSjLT/1/

我需要包含text1和text2的标签不要比包含更长文本的标签宽。

我觉得特别奇怪的是我编写的选择器在jQuery中工作正常（返回正确的节点），但似乎不能在css中工作：

.formdiv:nth-of-type(1) label{
    width: 60px;
}

我的HTML如下：

<form id="settings">
    <div class="formdiv">
        <label for ="text1">text1:</label>
        <input id="text1"></input>
        </br>   

        <label for = "text2">text2:</label>
        <input id="text2"></input>
        </br>   

        </br>   
    </div>
    <div class="formdiv">
        <label for = "longer text 1">longer text 1:</label>
        <input id="longer text 1"></input>
        </br>   

        <label for = "longer text 2">longer text 2:</label>
        <input id="longer text 2"></input>
        </br>   

        </br>   
    </div>
    <div class="formdiv">
        <label for = "longer text 1">longer text 1:</label>
        <input id="longer text 1"></input>
        </br>   

        <label for = "longer text 2">longer text 2:</label>
        <input id="longer text 2"></input>
        </br>   

        </br>   
    </div>
</form>

和我目前的css：

#settings .formdiv label {
  font: 12px Arial;
  text-align: right;
  width: 80px;
  display: inline-block;

}

#settings input {
  display: inline-block;
}

.formdiv {
  display:inline-block;
}

/*This doesn't seem to work!*/
.formdiv:nth-of-type(1) label{
    width: 60px;
}

非常感谢您的帮助。

罗宾

Answer 1

在.formdiv和:nth-of-type(1)

之间添加空格

jsFiddle example

.formdiv :nth-of-type(1){
    color:red;
}

您选择了nth-of-type的{{1}}。

添加空格会选择.formdiv的子元素的nth-of-type。

同样适用于.formdiv jsFiddle example

再次注意空间。

Answer 2

选择器#settings .formdiv label{}覆盖.formdiv:nth-of-type(1) label{}，因为它有一个ID，因为它针对每个width

定位<label>属性

在#settings上添加.formdiv:nth-of-type(1) label元素以增加其specifcity：

#settings .formdiv:nth-of-type(1) label{
    width: 60px;
}

http://jsfiddle.net/LSjLT/12/

Answer 3

使用以下内容：

.formdiv:first-of-type input {css}

Answer 4

.formdiv:nth-of-type(1) label{
width: 60px !important;
}

在CSS中使用id不是好习惯。在代码中添加它，您可以看到结果。

选择nth-of类型的孩子

4 个答案: