1

我在理解如何选择第 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;
}

非常感谢您的帮助。

罗宾

4

4 回答 4

3

.formdiv在和之间添加一个空格:nth-of-type(1)

jsFiddle 示例

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

您正在选择nth-of-type的.formdiv。

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

这同样适用于.formdiv :first-of-type jsFiddle 示例

再次注意空格。

于 2013-11-11T19:44:03.290 回答
2

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

预先添加#settings元素.formdiv:nth-of-type(1) label以增加其特异性：

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

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

于 2013-11-11T19:48:16.360 回答
1 
.formdiv:nth-of-type(1) label{
width: 60px !important;
}

在 css 中使用 id 不是一个好习惯。在你的代码中添加这个，你可以看到结果。

于 2013-11-11T20:41:09.333 回答
0

使用以下内容：

.formdiv:first-of-type input {css}
于 2013-11-11T19:46:06.750 回答