Question

我想在元素上有边距，如果元素是父<div>的第一个元素，则在右边;如果元素是父元素的最后一个元素，则在左边{ {1}}。

问题是，<div>中没有其他元素，只有纯文本。

我在哪里：

HTML：

<div>

CSS：

<div class="parent">
    <i>&rarr;</i>Action
</div>

<div class="parent">
    Action<i>&larr;</i>
</div>

使用第一个选择器我尝试定位第一个.parent i:first-child { margin-right: 5px; } .parent i:last-child { margin-left: 5px; }，并使用最后一个选择器我尝试定位最后一个<div>。

但实际上，因为<div>是唯一的子元素，所以这两个规则都适用于此元素。

请参阅fiddle。

有没有办法可以选择父项开头或结尾的<i>而不修改标记？（添加<i>来包装文本不是我正在寻找的解决方案......）

Answer 1

根据this question以及我原来问题的评论，似乎无法在CSS中实现文本节点选择。

因此，为了解决我的问题，我必须将我的文本节点包装在内联元素中，例如<span>，以便我的:first-child和:last-child选择器按预期工作。

请参阅updated fiddle

Answer 2

<div class="parent">
     <i>&rarr;</i>Action
</div>

<div class="parent">
    Action<i>&larr;</i>
</div>
<div class="clearfix"></div>


.parent {
    float: left;
}
.parent:first-child {
    margin-right: 5px;
}

区分元素与内联文本

2 个答案: