Question

假设我有一个div包装器，里面有几个元素，放置为inline。当div的宽度减小时，元素将自动分解为新线......到目前为止一直很好。

现在我要向子元素添加一个css :before内容，除了第一行之外的 ......

有没有办法只检测css，如果元素是换行后的第一个元素？

修改

跟进示例...... http://jsfiddle.net/kagfqt9j/

div的宽度导致孩子们分成三行。有一个“|”分隔符设置为:before。但我不希望:before应用于行的开头。

那么，我可以在休息后检测到第一个元素吗？

注意：将其更改为:after不是解决方案，因为它会反转问题...然后我会有“|”在行尾......我也不能拥有它。

Answer 1

如果您的小提琴是您的真实情况，使用overflow:hidden和text-align left的容器：那么，您可以使用此方法在容器外设置带有负边距的伪：http://jsfiddle.net/kagfqt9j/1/

a {
    display: inline-block;
    margin-right:0.25em;
    text-decoration:none;/* demo purpose */
}

 a:before {
    content: "| ";/* extra white-space aside the pipe */
    margin-left:-0.25em;
    color:black;/* demo purpose */
    pointer-events:none;/* demo purpose */
}

Answer 2

使用CSS无法做到这一点。

使用Javascript / JQuery，您可以找到每个元素的偏移/位置，然后确定哪个元素位于父div的最左侧。

Answer 3

JS解决方案

var lastOffsetTop = -1;
var elements = document.querySelector('.something');

for (var i = 0; i < elemenrs.length; i++)
{
  if (elements[i].offsetTop != lastOffsetTop)
    Sys.UI.DomElement.addCssClass(elements[i], 'firstInLine');
  else
    Sys.UI.DomElement.removeCssClass(elements[i], 'firstInLine');

  lastOffsetTop = elemens.offsetTop;

}

CSS - 选择换行后的第一个子项

3 个答案: