Question

我有以下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的方法。有人可以告诉我如何删除排水沟右侧和内联并使其与顶级<div>中的类一起引入？不知何故，我想指定gutter-right，但只是为第一个内部<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%;
}

Answer 1

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

即可

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

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

Answer 2

您可以使用E:first-child css选择器。

:first-child选择器用于选择指定的选择器，前提是它是父节点的第一个子节点。

Example

List of CSS selectors

Answer 3

而不是.gutter-right的规则，请转到.xl:first-child：

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

Fiddle first-child on MDN

如何为第一个子<div>？</div>创建不同的CSS

3 个答案: