1

我有以下 HTML：

<div class="columns clearfix">
   <div class="xl float-left gutter-right" 
        data-ng-show="modal.data.createdDate">
        <span class="label">Created</span>
        <input class="full-width"  type="text" value="{{modal.data.createdDate }}" />
   </div>
   <div class="xl float-left" 
        data-ng-show="modal.data.modifiedDate">
        <span class="label">Modified</span>
        <input class="full-width" type="text" value="{{modal.data.modifiedDate }}"/>
   </div>
</div>

我正在寻找一种用一些 CSS 来简化这个 HTML 的方法。有人能告诉我如何删除 gutter-right 和 inline 并使其在顶层引入一个类<div>吗？不知何故，我想指定 gutter-right 但只将它用于第一个 inside <div>。注意我使用的是 IE9 及更高版本的浏览器。另外，如果可能的话，我想拥有它，所以我不需要指定span.label和input.full-width。

请注意我尝试这样做的原因是因为我设置了许多类似这样的字段，一行上有两个字段，每个字段上方都有一个标签。

CSS：

.float-left {
   float: left;
}
.gutter-right {
   margin-right: 2rem;
}
.form label, .form .label {
   display: block;
   margin-bottom: 0.5rem;
}
.full-width {
   box-sizing: border-box;
   width: 100%;
}
4

3 回答 3

3

只需使用element:nth-child(1){ /*whatever*/ }

或者element:first-child { /*whatever*/ }

你也可以使用element:nth-of-type(1){ /*whatever*/ }

于 2013-11-01T14:16:27.110 回答
0

而不是规则 for .gutter-right，去 for .xl:first-child：

.xl:first-child {
   margin-right: 2rem;
}

在MDN first-child上摆弄

于 2013-11-01T14:21:18.290 回答
0

您可以只使用E:first-childcss 选择器。

选择:first-child器用于选择指定的选择器，仅当它是其父项的第一个子项时。

例子

CSS 选择器列表

于 2013-11-01T14:20:20.683 回答