CSS - 選擇第一個換行後的孩子

我們假設我有一個div包裝，裏面有幾個元素，放置爲inline。當div的寬度減小時，元素將自動分解成新行......迄今爲止都很好。CSS - 選擇第一個換行後的孩子

現在我想的CSS :before內容添加到子元素，除非是先上線的那些...

有沒有一種方法來檢測，CSS只，如果元素是換行後的第一個元素嗎？

編輯

跟進的例子... http://jsfiddle.net/kagfqt9j/

div的寬度造成兒童在三條線被打破。有一個「|」用:before設置分頻器。但我不希望:before應用於線路的開始。

那麼，我可以檢測休息後的第一個元素？

注意：將其更改爲:after不是一個解決方案，因爲它會顛倒這個問題......然後我會得到「|」在行尾......我也無法擁有它。

來源

2014-08-29 LcSalazar

有可能是一個解決方案，如果你能provid e [在線編輯器]上的簡化示例（http://jsfiddle.net/）。 – 2014-08-29 21:04:09

如果你的小提琴是你的真實情況，容器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 */ 
}

來源

2014-08-29 21:53:31

謝謝..我想出了一個類似的解決方案，但是我添加了一個內部div，將它放在左側以隱藏「管道」，並向「：first-child」添加了一個頁邊距。認爲沒有辦法用選擇器來做......無論如何，你的解決方案更清潔，而這種「黑客」對我來說是可以接受的。我正在標記你是正確的答案。 – LcSalazar 2014-08-29 21:58:45

太棒了！歡迎您，我沒有想到這種情況是真正的，似乎太簡單了，不真實:) – 2014-08-29 22:06:40

這是不可能使用CSS。

使用Javascript/JQuery，您可以找到每個元素的偏移量/位置，然後確定哪一個位於父div的最左邊。

來源

2014-08-29 20:57:40

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; 
 

 
}

來源

2015-05-18 21:00:55 andreas

CSS - 選擇第一個換行後的孩子

回答

相關問題